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>
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".
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>