I am trying to set the styles of a div when a button is clicked. The changes occur but then they instantly revert back to the existing styling.
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/
Change to
<a href="" data-gm="multi" class="js-btn single-btn">
<a href="" data-gm="single" class="js-btn multi-btn">
then
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();
}
})