js_inputText의 입력값 가져오기 문제(getElementById, getElementsByClassName)

문제

input 태그 안에 입력한 문자열 ‘Hello’를 JS로 가져오고 싶었다. 그런데 클래스명으로 지정해서 value 프로퍼티를 가져오려니 undefined만 반환하는 것이 문제다.

 

문제 원인, 시도

시도 1 - innerText로 가져오기

function postComment(num) {
  const inputText = document.getElementsByClassName(`comment-post-input-${num}`).innerText;

  console.log(inputText);

}​

-> undefined

 

시도2 - value로 가져오기

function postComment(num) {
  const inputText = document.getElementsByClassName(`comment-post-input-${num}`).value;

  console.log(inputText);

}​

-> undefined

혹시 getElementsByClassName의 문제일까?

 

해결

getElementsByClassName -> getElementbyById

function postComment(num) {
  const inputText = document.getElementById(`comment-post-input-1`).value;
  console.log(inputText);
}​

input에 입력한 텍스트값을 가져오기 위해 getElementById를 사용하니까 작동이 된다.  getElementsByClassName는 작동이 안된다.

 

알게된 점

getElementsByClassName(‘’) -> 어레이 리턴

getElementById(‘’) -> 값 리턴

getElementsByClassName은 어레이를 반환한다. 메소드 명에서도 알 수 있듯이 getElementById와 달리 getElementsByClassName은 복수형이다. 당연히 Class는 여러 곳에서 쓰일 수 있기 때문이다. 

function postComment(num) {
  // getElementsByClassName는 어레이를 반환하기 때문에 0번째 인덱스를 추가해줘야 한다
  const inputText = document.getElementsByClassName(`comment-post-input-1`)[0].value;

  // getElementById는 값을 반환하기 때문에 바로 value 값을 얻을 수 있다
  //const inputText = document.getElementById(`comment-post-input-1`).value;
  console.log(inputText);
}

 

참조

https://stackoverflow.com/questions/34207638/how-to-get-value-by-class-name-using-javascript