input values

인풋태그의 벨류값을 알아본다

<div id="login-form">
        <input type="text" placeholder="what is your name">
        <button>log in</button>
        <script src="app.js"></script>
    </div>

• 이름을 묻는 텍스트 인풋창을 만든다

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

• loginForm은 영역이기에 다른 태그들을 div 태그 안에 있는 input 등이라고 선언할수있다
• 아무데나 되는건 아니고 영역태그만 가능하다
• 위태그는

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

  • 이런 방식으로 ()괄호안에 후손선택자를 이용해 document에서 바로 선언해 사용할수있다

    function nLoginbtnClikc(){
        console.log(loginInput)
    }
    
    loginButton.addEventListener("click",nLoginbtnClikc)

  • 버튼이 눌리면 text태그 안의 id를 이용해 선언한 변수명으로 click태그를 선언자로 선언하고 동적으로 작동할 함수와 연결해 사용할수있다.