Hice esta pregunta para responderla porque no hay información clara o pregunta al respecto. Encontré la solución en un comentario, no en una respuesta. así que espero que esto ayude a otros.
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="" class="btn" id="btn" onclick="clickBtn()">btn</a> <div class="box" id="box"></div> </body> </html>CSS
.btn{ width: 150px; height: 50px; cursor: pointer; margin: 10px; background: black; color: white; } .box{ width: 200px; height: 200px; background: orange; margin: 5px; }javascript
var box = document.getElementById("box"); function clickBtn() { if (box.style.background = "orange"){ box.style.background = "blue"; } else { box.style.background = "green"; } }1- Si usa <a> como botón, actualizará la página siempre que tenga href="" . así que elimine href y funcionará sin actualizar la página.
2- si desea mantener el href , cambie el <a> al button . funcionó para mí
use href="javascript:void(0)" en una etiqueta. El javascript: void (0) se puede usar cuando no queremos actualizar o cargar una nueva página en el navegador al hacer clic en un hipervínculo.