<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<div id="login-form">
<input value="lalala" type="text" placeholder="What is your name?" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
</html>HTML의 element인 id="login-form" 를 JavaScript에 가져오는 방법.
방법 1) querySelector 이용하기
const loginForm = document.querySelector("#login-form"); // '#' 해시태그 필요방법 2) getElementById 이용하기
const loginForm = document.getElementById("login-form"); // '#' 해시태그 필요 없음const loginForm로 변수 선언을 해줬으니 변수 loginForm을 이용하면 document가 아닌<div id="login-form> 안에서 input과 button을 바로 찾을 수 있다.
const loginForm = document.querySelector("#login-form");
//html의 login-form을 찾음
const loginInput = loginForm.querySelector("input");
//document가 아닌 loginForm 안에서 바로 찾는다.
const loginButton = loginForm.querySelector("button"); 위의 코드를 아래 처럼 줄일 수 있다.
⬇️⬇️⬇️
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");"What's your name" input에 입력한 값(user name)을 가져오고 싶다. input의 내용을 가져오려면 콘솔창에서 어떤 property를 찾아봐야 하는지 알아야 한다. console.dir()로 알아보기
function onLoginBtnClick() {
console.dir(loginInput);
console.log("click!!!!");
}
loginButton.addEventListener("click", onLoginBtnClick);
input에 아무 값("lalala")를 고의적으로 넣어서 property명을 알 수 있다. property명은 value다.
콘솔창에 user name 출력하기
console.log(loginInput.value);
user name(gata) 입력 후 Log In(click) button 누르기
console창에 gata가 출력됨
근데 만약, 아무값도 입력하지 않고 click button을 누르면 어떻게 될까?
click 버튼을 누르는 만큼 console창에 뜬다.
하지만 내가 원하는 건 user가 이름을 입력했을 때만 button을 클릭할 수 있도록 하는 것이다.
다음 글에서는 user name의 유효성 검사에 대해 알아보려고 한다.
개발은 즐거워🪇