처음 사용할 때 버튼 표시/숨기기를 두 번 클릭하는 이유는 무엇입니까?

웹 페이지에서 버튼은 표시하거나 숨기기 위한 것입니다. 요소이지만 초기 호출 시 두 번 클릭해야 합니다. 조사 결과 버튼의 코드는 다음과 같습니다.

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

이 문제는 ID가 'menu'인 요소의 초기 상태에서 발생합니다. 기본적으로 CSS에서 요소의 표시 속성은 "none"으로 설정됩니다. showhidemenu() 함수가 처음 호출되면 다음 확인이 수행됩니다.

if (x.style.display === "none")

이 확인 요소의 초기 표시 속성이 "none"이므로 true로 평가됩니다. 결과적으로 요소의 표시는 "차단"으로 설정됩니다. 그러나 다음 클릭 시 예상대로 표시 속성이 "없음"으로 설정됩니다.

이 문제를 해결하려면 요소의 초기 표시 속성을 "없음" 대신 "비어 있음"으로 설정해야 합니다. 이렇게 하면 첫 번째 클릭 시 함수의 확인이 올바르게 평가됩니다.

if (x.style.display === "none" || x.style.display === "")

이 수정을 통해 의도한 대로 첫 번째 클릭 시 버튼에 요소가 표시됩니다.