Estoy creando un botón donde quiero hacer clic y expandir, y deshacerme del borde inferior y cuando lo expando quiero que el borde inferior vuelva, así que creo una función donde cuando hago clic una vez, su módulo no puede dividirse por dos y cuando hago clic una vez más, que se colapsa, el recuento del botón para hacer clic es 2, por lo que se puede dividir por 2. A continuación se muestra mi código, pero no sé por qué no funcionará.
<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>tener la variable count dentro de la función significa que cada vez que se llama a la función, el valor de count se restablece a 0. arreglarlo es tan simple como mover la declaración de count fuera de la función, haciéndola "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>