4.0 Input Values

강의

우리는 이제부터 어떤걸 해야할까?

1. 우리는 유저에게 물어봐야한다. 이름이 뭐냐?
2. 그 다음 그 정보들을 어떻게 받을지에 대해 배울거다. 왜냐면 우리는 아직 그 정보들을 어떻게 받는지 모르기 때문이다. 우린 아직 어떻게 저장하는지 모른다.
3. 받은 정보를 화면에 표시할거다.

로그인 양식

    <div id="login-form">
      <input type="text" placeholder="What is your name?" />
      <button>Log In</button>
    </div>

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

아마 input과 button은 여기서만 나오는게 아니라, 아마 끊임없이 등장할거다. 그래서, 특정짓는 것이 필요하다. 그렇기 때문에, 이것들을 div에 넣어 주어 class나 id를 부여한다.

더 짧은 코드를 원한다면,

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

---

버튼을 클릭했을때, 인풋에 들어간 값(value)를 출력하는 이벤트를 생성한다.

const loginInput = document.querySelector("#login-form input");
const loginButton= document.querySelector("#login-form button");
function onLoginBtnClick(){
    console.log(loginInput.value);
}
loginButton.addEventListener("click",onLoginBtnClick);

---

const loginInput = document.querySelector("#login-form input");
const loginButton= document.querySelector("#login-form button");
function onLoginBtnClick(){
    console.log("hello",loginInput.value);
}
loginButton.addEventListener("click",onLoginBtnClick);

내가 만약 "안녕 누구누구야"를 출력하고 싶어서 "hello"를 적어주면, 이름을 안적었는데도 hello만 출력되는 이상한 일이 생긴다.

우리는 유저가 이름을 입력했을 때만 버튼을 클릭할 수 있도록 하고 싶다.

다음 강의때 조건문을 활용하여 이 부분을 보완할 것이다.