CODEWITHSUNDEEP
javascriptcss
Christian
Christian

Reputation: 391

Styles revert back after being changed with JS code

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.

View Demo

Full Source Code

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>

Upvotes: 1

Views: 389

Answers (1)

mplungjan
mplungjan

Reputation: 177940

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();
  }
})

Upvotes: 2

Related Questions