나는 버튼의 onclick을 사용하여 그것을 보여주는 자바 스크립트를 사용하여 디스플레이가 없음으로 설정된 DIV가 있습니다. 그러나 일어나는 일은 정반대입니다. 내 DIV가 이미 표시되어 있으며 버튼을 클릭하면 DIV가 숨겨집니다. 내가 여기서 뭘 잘못하고 있니, 도와주세요!
이것은 내 버튼과 div입니다.
<button onclick="myFunction()">SHOW</button>
<div id="how_to_form">
<img src="../images/view.png">
</div>
이것은 JS 코드입니다.
function myFunction() {
var x = document.getElementById("how_to_form").style.display = 'none';
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
귀하의 라인에는 이중 할당이 있습니다.
var x = document.getElementById("how_to_form").style.display = 'none';
먼저 display없음을 지정합니다 .
document.getElementById("how_to_form").style.display = 'none';
그런 다음 해당 표현식의 결과 (지정한 문자열)를 가져 와서 다음과 같이 지정합니다 x.
var x = 'none';
당신이 원하는 것이 아닙니다. 먼저 요소에 대한 변수를 선언 한 다음 스타일을 지정하십시오.
또한 요소가 숨겨진 상태로 시작되기를 원하는 것처럼 들립니다 . 함수 외부에 초기 스타일을 할당 합니다.
const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
또는 더 간결하게하려면 조건부 연산자를 사용하십시오.
function myFunction() {
form.style.display = form.style.display === "none"
? 'block'
: 'none';
}
또한 인라인 HTML 속성을 사용하는 대신 Javascript를 사용하여 핸들러를 적절하게 연결하는 것을 고려하십시오. 일반적으로 매우 좋지 않은 관행으로 간주되고 관리하기 어려울 수 있습니다.
document.querySelector('button').addEventListener('click', myFunction);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다