Vanilla JS 입력창에 입력한 값 가져오기

 

다음의 jQuery를 Vanilla JS로 변경해 보자

 

jQuery

<input type="text" class="input1">
  <button class="btn2">값 확인</button>
  <script>
    $('.btn2').click(function(){
      const val =$('.input1').val();
      alert("입력한 값: " + val);
    })
  </script>

 

 

---

 

Vanilla JS - 입력창에 입력한 값 가져오기

<input type="text" class="input1">
<button class="btn2">값 확인</button>
<script>
document.querySelector(".btn2").addEventListener("click",function(){
  const val = document.querySelector(".input1").value;
  alert("입력한 값: " + val);
})
</script>

 

- value : 값을 가져오거나 설정할 때 사용

document.getElementById("nameInput").value = "미리 채워진 값";

이런식으로 변경도 가능