[JS] (해결✅)input text 태그 value 가져오기 _ class/ id 선택자차이

button 을 클릭하면 input text의 value 값 가져오기

가능(id 선택자사용)

HTML코드

 <h1>원하는 단을 입력해주세요</h1>
  <input type="text" placeholder="숫자를 입력하세요"  id="typedtext" name="txt">
  <input type="button"  value="클릭" onclick="get()">

JS코드

function get(){
      let typped = document.getElementById('typedtext').value;
      console.log(typped)
    }

---

불가능(class 선택자사용)

HTML코드

 <h1>원하는 단을 입력해주세요</h1>
  <input type="text" placeholder="숫자를 입력하세요"  class="typedtext" name="txt">
  <input type="button"  value="클릭" onclick="get()">

JS코드

function get(){
      let typped = document.getElementsByClassName('typedtext').value;
      console.log(typped)
    }

---

해결💡

(class 선택자사용이 불가능했던이유)

▶️ id 선택자와 다르게 class 선택자는 중복사용이 가능하다.
그러므로 getElementsByClassName('typedtext') 뒤에 어디에 있는 class선택자인지를 알려주는 인덱스 값을 추가해야한다.😱

인덱스값이 없어 에러가남

function get(){
   let typped = document.getElementsByClassName('typedtext').value;
   console.log(typped)
 }

인덱스값을 지정해주어 제대로 작동함

function get(){
   let typped = document.getElementsByClassName('typedtext')[0].value;
   console.log(typped)
 }