[jQuery] box를 toggle 할 때 왜 getElementById는 안될까?

<div class="my-title">
<button onclick="openClose()">추억 저장하기</button>
</div>

<div class="my-postingBox" id="postingBox">
<input type="email" id="form-control">
<label for="floatInput">사진 제목</label>
</div>

 

- 문제

`추억 저장하기` 버튼을 누르면 postingBox 메뉴가 열리고 닫히는걸 구현하고자 한다.

 

 

- 오답

function openClose() {
  document.getElementById('postingBox').toggle();
} //error

이렇게 지정했더니 안먹었다.

 

 

왜 그럴까 ?

 

-해결 방법

- getElementById('postingBox')

• getElementById('postingBox')는 문서에서 ID가 'postingBox'인 요소를 찾아온다.
• 그 요소를 반환하고, 반환된 요소에 대해서는 순수 JavaScript로 다양한 작업을 수행할 수 있다

function openClose() {
	let postingBox = document.getElementById('postingBox');
	if(postingBox.style.display === 'none') {
	posting.style.display = 'block'; //화면에 보이게 하기
	}else {
	postingBox.style.display ='none'; //화면에서 숨기기
    }
}

이런식으로 지정하고나서의 행동을 구현해줘야 한다고 한다.

 

 

- $('#postingBox')

• 제이쿼리는 선택자로, 'postingBox인 요소를 선택하라' 라는 의미가 된다.
• 그래서 제이쿼리는 선택된 요소에 대해 다양한 작업을 수행할 수 있는 메소드를 제공한다.

function openClose() {
  $('#postingBox').toggle();
}

 

이렇게 구현하니 됐다.

 

제이쿼리는 간단하게 할 수 있는 곳에 구현하는게 좋을 것 같다는 생각을 했다.