[노마드코더]바닐라JS로 크롬 앱 만들기 (22)login-form 형태 만들기

크롬 앱을 만들기 위해서 user에게 질문을 한 후 정보를 받아와서 화면에 나타내보자.

HTML을 작성한 다음 element를 Javascript로 가져와서 구현할 수 있다.

 

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

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

위 두 코드는 HTML에서 login-form을 가져오는 코드이다.

첫 번째 코드는 document에서 login-form을 가져온 다음 querySelector를 이용해서 input과 button을 가져왔고,

두 번째 코드는 document에서 login-form input과 login-form button을 각각 가져왔다.

같은 결과를 가져오므로 어떤 코드를 쓰는지는 상관없다.

 

index.html에 #12~#13 login-form을 input과 button으로 정의한 뒤,

app.js #1~#2 에서 login-form을 querySelector로 가져온다.

#8 에서 click event가 발생하면 loginInput.value과 'hello'를 console에 출력한다.