Estoy tratando de establecer los estilos de un div cuando se hace clic en un botón. Los cambios ocurren, pero luego vuelven instantáneamente al estilo existente.
document.body.addEventListener("click", (e) => { if (e.target.classList.contains("js-multi-btn")) { gameBoard.setGameMode('multi'); displayController.revealBoard(); } }); document.body.addEventListener("click", (e) => { if (e.target.classList.contains("js-single-btn")) { gameBoard.setGameMode('single'); displayController.revealBoard(); } }); function revealBoard() { var btns = document.querySelector('.js-gameplay-btns'); btns.style.display = 'none' var board = document.getElementById('js-board') board.style.backgroundColor = 'white'; } <a href="" class="js-multi-btn multi-btn">Multi Player Mode</a> <a href="" class="js-single-btn single-btn">Single Player Mode</a>https://jsfiddle.net/mplungjan/unjsp6tm/
Cambiar a
<a href="" data-gm="multi" class="js-btn single-btn"> <a href="" data-gm="single" class="js-btn multi-btn">después
document.querySelector(".js-gameplay-btns").addEventListener("click", (e) => { const tgt = e.target.closest("a"); if (tgt && tgt.classList.contains("js-btn")) { e.preventDefault() gameBoard.setGameMode(tgt.dataset.gm); displayController.revealBoard(); } })