onclick 触发器在第一次单击时不起作用

Question

i made this button but it dosen't work at first click. it is work when i clicked twice;; is there anything that i miss? or something wrong? any help will be so appreciated:) thanks!

 function myFunction99() { var gwbtn = document.getElementById("discountbigbox"); var gwbtnbig = document.getElementById("discountprice"); if (gwbtn.style.height === "0px") { gwbtn.style.height = "210px"; gwbtnbig.style.border = "1px solid black"; gwbtnbig.style.color = "black"; } else { gwbtn.style.height = "0px"; gwbtnbig.style.border = "1px solid #cccccc"; gwbtnbig.style.color = "#999"; } }

 #discountbigbox {width:100%; height:0px; overflow:hidden; text-align:left; background-color: #f7f9ff; margin-bottom:20px; transition: all 0.5s ease; font-size:13px; margin-top:45px; } #discountprice { border: 1px solid #cccccc; width: fit-content; float: right; padding: 0px 10px; border-radius: 4px;} #discountprice:hover { border: 1px solid black; color:black;}

 <div id="discountprice" onclick="myFunction99()" > &#43; click this button</div> <div id="discountbigbox"> <p>test</p> </div>

Answer 1

On first click the height property value is empty, add the condition to check empty:

if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {

 function myFunction99() { var gwbtn = document.getElementById("discountbigbox"); var gwbtnbig = document.getElementById("discountprice"); if (gwbtn.style.height === "0px" || gwbtn.style.height === "") { gwbtn.style.height = "210px"; gwbtnbig.style.border = "1px solid black"; gwbtnbig.style.color = "black"; } else { gwbtn.style.height = "0px"; gwbtnbig.style.border = "1px solid #cccccc"; gwbtnbig.style.color = "#999"; } }

 #discountbigbox {width:100%; height:0px; overflow:hidden; text-align:left; background-color: #f7f9ff; margin-bottom:20px; transition: all 0.5s ease; font-size:13px; margin-top:45px; } #discountprice { border: 1px solid #cccccc; width: fit-content; float: right; padding: 0px 10px; border-radius: 4px; } #discountprice:hover { border: 1px solid black; color:black; }

 <div id="discountprice" onclick="myFunction99()" > &#43; click this button</div> <div id="discountbigbox"> <p>test</p> </div>

Answer 2

The height property starts off as not set (ie empty). Setting it in the CSS doesn't mean there's a value in the JS style property in the DOM - that reads from the inline style property of the element.

If you account for that in your initial if then it will work fine:

if (gwbtn.style.height === "0px" || !gwbtn.style.height) {

Demo:

 function myFunction99() { var gwbtn = document.getElementById("discountbigbox"); var gwbtnbig = document.getElementById("discountprice"); console.log(gwbtn.style.height); if (gwbtn.style.height === "0px" ||.gwbtn.style.height) { gwbtn.style;height = "210px". gwbtnbig.style;border = "1px solid black". gwbtnbig.style;color = "black". } else { gwbtn.style;height = "0px". gwbtnbig.style;border = "1px solid #cccccc". gwbtnbig.style;color = "#999"; } }

 #discountbigbox {width:100%; height:0px; overflow:hidden; text-align:left; background-color: #f7f9ff; margin-bottom:20px; transition: all 0.5s ease; font-size:13px; margin-top:45px; } #discountprice { border: 1px solid #cccccc; width: fit-content; float: right; padding: 0px 10px; border-radius: 4px;} #discountprice:hover { border: 1px solid black; color:black;}

 <div id="discountprice" onclick="myFunction99()" > &#43; click this button</div> <div id="discountbigbox"> <p>test</p> </div>

---

Alternatively, you can use getComputedStyle to detect the style values of the element as computed when stylesheets are taken into account:

 function myFunction99() { var gwbtn = document.getElementById("discountbigbox"); var gwbtnbig = document.getElementById("discountprice"); var st = getComputedStyle(gwbtn); console.log(st.height); if (st.height === "0px") { gwbtn.style.height = "210px"; gwbtnbig.style.border = "1px solid black"; gwbtnbig.style.color = "black"; } else { gwbtn.style.height = "0px"; gwbtnbig.style.border = "1px solid #cccccc"; gwbtnbig.style.color = "#999"; } }

 #discountbigbox {width:100%; height:0px; overflow:hidden; text-align:left; background-color: #f7f9ff; margin-bottom:20px; transition: all 0.5s ease; font-size:13px; margin-top:45px; } #discountprice { border: 1px solid #cccccc; width: fit-content; float: right; padding: 0px 10px; border-radius: 4px;} #discountprice:hover { border: 1px solid black; color:black;}

 <div id="discountprice" onclick="myFunction99()" > &#43; click this button</div> <div id="discountbigbox"> <p>test</p> </div>

Answer 3

You have two states you need to cover "blank or zero" and "210".

You can craft the if logic differently to only use the fixed value, eg:

if (thing.style.height !== "210px") {
  // it's blank or zero
} else {
  // it's 210
}