[JavaScript] document.getElementById('').style.display와 document.getElementsByClassName('').style.display의 차이

button의 onclick 속성을 이용해서 버튼을 누르면 알림창이 닫히고 나오는 연습을 하고 있었다.

 

먼저 html 코드는 

 

  <div class="alert-box" id="alert">알림창임

    <button onclick = "display('none');">닫기</button>

  </div>

  <button onclick = "display('block');">버튼</button>

 

css 코드는

 

.alert-box {

  background-color: skyblue;

  padding: 20px;

  color: white;

  border-radius: 5px;

  display: none;

}

 

JavaScritp 코드는 함수를 이용해서

 

  function display(css) {

    document.getElementById('alert').style.display = css;

  }

 

이런식으로 짜봤더니 잘 실행 되었다.

 

 

이번엔 id값을 따로 주지 않고 class값만 주어서 코드를 짜봤다.

html 코드는

 

 <div class = "writeId"> ID를 입력하세요

  </div>

  <button onclick = "writeId();">버튼1</button>

  <div class = "writePw"> PASSWORD를 입력하세요

  </div>

  <button onclick= "writePw();">버튼2</button>

 

css 코드는

 

.writeId {

  background-color: skyblue;

  padding: 20px;

  color: white;

  border-radius: 5px;

  display: none;

}

.writePw {

  background-color: skyblue;

  padding: 20px;

  color: white;

  border-radius: 5px;

  display: none;

}

 

JavaScript 코드는

 

    function writeId() {

      document.getElementsByClassName('writeId').style.display = 'inline-block';

    }

    function writePw() {

      document.getElementsByClassName('writePw').style.display = 'inline-block';

    }

이렇게 짜고 실행해보았더니 실행이 되지 않았다.

 

getElementById도 's'를 붙여서 getElementsByClassName으로 잘 바꿨는데

왜 실행이 안될지 의문이 들어서 구글에 검색해보았는데, 

stackoverflow에서 나와 같은 문제를 겪은 사례를 발견하였다.

 

https://stackoverflow.com/questions/69516678/getelementsbyclassnamecontainer-style-display-block-somehow-doesnt-work

 

답변 중 배열을 활용해서 적용해보라는 답변이 눈에 띄어서 아차 싶었다.

Id는 하나밖에 없어서 element에 s가 안붙고

class는 여러가지가 적용될 수 있어서 element에 s가 붙는다는 건 잘 알아챘으면서

지금 당장은 내가 짠 코드에 해당 class값을 하나밖에 지정을 안했다고 해서 

배열을 생각하지 못한 것이 원인이었다. 

그래서 배열을 적용해서 코드를 바꿔보았더니

 

    function writeId() {

      document.getElementsByClassName('writeId')[0].style.display = 'inline-block';

    }

    function writePw() {

      document.getElementsByClassName('writePw')[0].style.display = 'inline-block';

    }

 

성공!