onclick trigger doesn't work at first click

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>

You need to use [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) to retrieve the height for the comparison in the conditional clause. — secan, Apr 30 '21 at 10:44
https://stackoverflow.com/questions/50645188/why-element-style-always-return-empty-in-js — James, Apr 30 '21 at 10:47

score 0 · Accepted Answer · answered Apr 30 '21 at 10:43

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>

omg thank you so much @Manmun !! this is exactly what i want!! thanks a lot and have a great day!!! :D — geo _, May 03 '21 at 00:54

ADyson · Answer 2 · 2021-04-30T10:49:20.190

The height property starts off as not set (i.e. 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>

Hi! @ADyson ! thanks your explain ! appreciate for your help! thanks and have a great day! :D — geo _, May 03 '21 at 00:57

score 0 · Answer 3 · answered Apr 30 '21 at 11:16

0

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
}

answered Apr 30 '21 at 11:16

James

20,957
5
26
41

onclick trigger doesn't work at first click

3 Answers3