How to change the border style when click expand and collapse-CodePudding

I am creating a button where I want to click and expand, and get rid of the bottom border and when I expand it I want the bottom border to come back, so I create a function where when I click once, its modulo cannot divide by two and when I click one more time, which is collapse, the count for the button to click is 2 so it can be divided by 2. Below is my code but I don't know why it won't work.

<script>
 function hideBorder() {
      var count = 0;
      var btn = document.getElementById("chi");
      if (btn.onclick) {
        count  ;
      }

      if (count % 2 == 0) {
        doucment.getElementById("chi").style.borderBottom = "2px solid #65daff";
        document.getElementById("chi").style.borderEndEndRadius = "10px";
        document.getElementById("chi").style.borderEndStartRadius = "10px";
      } else if (count % 2 == 1) {
        doucment.getElementById("chi").style.borderBottom = "none";
        document.getElementById("chi").style.borderEndEndRadius = "0px";
        document.getElementById("chi").style.borderEndStartRadius = "0px";
      }
    }
</script>

CodePudding user response：

having the count variable inside the function means everytime the function is being called, count's value resets to 0. fixing it is as simple as moving the declaration of count outside of the function, making it "global".

CodePudding user response：

var count = 0;
function hideBorder() {
  var btn = document.getElementById("chi");
  if (btn.onclick) {
    count  ;
  }
  if (count % 2 == 0) {
    btn.style.borderBottom = "2px solid #65daff";
    btn.style.borderEndEndRadius = "10px";
    btn.style.borderEndStartRadius = "10px";
  } else if (count % 2 == 1) {
    btn.style.borderBottom = "none";
    btn.style.borderEndEndRadius = "0px";
    btn.style.borderEndStartRadius = "0px";
  }
}

<button id="chi" onclick="hideBorder()">click</button>