[바닐라JS] JS가 유저의 행동 여부를 알 수 있는 방법

* JS : Vanilla Java Script를 사용합니다

 

컴퓨터는 유저가 버튼을 클릭했다는 것을 인지해야 다음 행동을 연결할 수 있다.

대표적인 HTML의 '클릭'은 input 태그와 button 태그

 

1. HTML

일반적으로 input 태그가 쓰이는 모양은 아래와 같다 

<form>
    <input type="text">텍스트</input>
    <button>버튼</button>
</form>

 

2. HTML 태그를 JS로 불러오기

HTML 작성 후에는 form 태그 안에 있는 input과 button을 JS로 불러온다.

 

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

 

이제 input 태그에 값을 입력하고 button을 클릭 했을 때 페이지에 출력(console.log)이 되어야 한다.

값을 받아오기 전에 클릭 이벤트에 대한 작업을 먼저 해준다. 

 

3. 이벤트 작업

1) 값을 전송해주는 매개체인 버튼에 Click 이벤트가 발생하는 것이므로

loginButton.addEventListener("click");

 

2) function 자리를 마련해주자

function onBtnClick(){

}

 

3)지금까지 입력한 것을 한 파일에 끼워맞춰준다

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onBtnClick(){
}

loginButton.addEventListener("click");

 

4. 값 받아오기

페이지에서 사용자가 input 태그에 값을 입력한 값이 버튼을 클릭 했을 때 JS로 전달되어야 한다

자리를 마련해두었던 function에 값을 받아오는 코드 하나를 추가한다.

console.log(loginInput.value);

 

콘솔창을 켜고 input 태그에 값을 입력하면 내가 입력한 내용이 콘솔창에 표시되는 것을 알 수 있다 

 

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onBtnClick(){
	console.log(loginInput.value);
}

loginButton.addEventListener("click");