getElementsByClassName

버튼을 눌렀을 때 Hello 또는 Bye가 보이는 버튼 만들기

(1. 기본값이 Hello인 버튼 만들기)
2. 홀수번 클릭시 Bye로 변경
3. 그 외의 경우(짝수번 클릭시) Hello로 변경

var count=0;

document.getElementByClassName('인사').addEventListener('click', function () {
  count += 1;
  if (count % 2 == 1) {
    인사.innerHTML = 'Bye'
  }
  else {
    인사.innerHTML =
      'Hello'
  }
});

❌ 에러 발생 ❌

caught TypeError: document.getElementByClassName is not a function

getElementByClassName()은 getElementById()와 달리 동일한 class명이 존재할 수 있다. 따라서 getElementByClassName()는 getElementsByClassName이라고 작성해야한다.

또한, getElementByClassName()는 컬렉션 객체를 반환하기 때문에 이벤트 리스너를 등록하려면 특정 index로 요소를 선택한 후 이벤트 리스너를 등록해야한다.

var count=0;
var 인사하기 = document.getElementsByClassName('인사')[0];

인사하기.addEventListener('click', function () {
  count += 1;
  if (count % 2 == 1) {
    인사.innerHTML = 'Bye';
  } else {
    인사.innerHTML = 'Hello';
  }
});