1. Input Values
HTML에서
<body>
<div id="login-form">
<input type="text" palceholder="What is your name?"/>
<button>Log In</button>
</div>
</body>js에서
const loginForm = document.getElementById("login-form"); 여기서 querySelector()로 찾게 되면 괄호 안에 # 붙여야 한다.
그리고 이 후 할 일은 input이랑 button을 끌어오는 것이다.
- 첫 번째 방법
const loginForm = document.getElementById("login-form");
cosnt loginInput = loginForm.querySelector("input");
cosnt loginButton = loginForm.querySelector("button");위 방법은 HTML의 body의 element를 JS로 끌고 와서 Input과 button을 찾는 것이다.
근데 Input과 Button을 document로 찾지 않고 loginForm 안에서 바로 찾을 수 있다.
- 두 번째 방법(좀 더 짧은 코드)
cosnt loginInput = document.querySelector("#login-form input");
cosnt loginButton = document.querySelector("#login-form button");2. Value 저장하기
value를 입력하고 button을 눌렀을 때 값이 나올 수 있게 만들려면
function onLoginBtnClick() {
console.dir(loginInput);
console.log("click!!");
}
loginButton.addEventListener("click", onLoginBtnClick);console.dir(loginInput); 코드는 onLoginBtnClick() 이 실행되면서 loginInput의 내부를 보여줄 것이다.
여러 object 중에 중요한 value.
console.log(loginInput.value);로 수정해준다.
function onLoginBtnClick() {
console.dir(loginInput);
}
loginButton.addEventListener("click", onLoginBtnClick);click!!! 문장은 지우기.
안녕하세요! 만나서 반갑습니다!