Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to prevent the innerHTML of change again after the click event

let player1 = document.getElementById("player1").innerHTML;
let player2 = document.getElementById("player2").innerHTML;

let turn = 0
let blocks = document.getElementsByClassName("blocks");

for (let i of blocks) {
  i.addEventListener("click", (event) => {
    i.innerHTML = turn
    if (turn == 0) {
      event.target.innerHTML = player1
      turn = 1
    } else {
      event.target.innerHTML = player2
      turn = 0
    }
  })
}
<div class="container">

  <div>
    <div id="0" class="blocks"></div>
    <div id="1" class="blocks"></div>
    <div id="2" class="blocks"></div>
  </div>

  <div>
    <div id="3" class="blocks"></div>
    <div id="4" class="blocks"></div>
    <div id="5" class="blocks"></div>
  </div>

  <div>
    <div id="6" class="blocks"></div>
    <div id="7" class="blocks"></div>
    <div id="8" class="blocks"></div>
  </div>

</div>

<div id="player1" class="players">👵🏿</div>
<div id="player2" class="players">👵🏻</div>

>Solution :

Just test for innerHTML first to see if there is already somethign in there…

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

if (i.innerHTML.trim() != '') return;
let player1 = document.getElementById("player1").innerHTML;
let player2 = document.getElementById("player2").innerHTML;
let turn = 0
let blocks = document.getElementsByClassName("blocks");
for (let i of blocks){
i.addEventListener("click", (event)=>{
    if (i.innerHTML.trim() != '') return;
    i.innerHTML = turn 

    if (turn == 0){
        event.target.innerHTML = player1
        turn = 1
    }
    else {event.target.innerHTML = player2
    turn = 0}

})
}
.blocks {
padding:20px;
text-align:center;
border:1px solid #666;
float:left;
margin-right:5px;
}
 <div>
        <div id="0" class="blocks"></div>
        <div id="1" class="blocks"></div>
        <div id="2" class="blocks"></div>
    </div>
    
    <div>
        <div id="3" class="blocks"></div>
        <div id="4" class="blocks"></div>
        <div id="5" class="blocks"></div>
    </div>

    <div>
        <div id="6" class="blocks"></div>
        <div id="7" class="blocks"></div>
        <div id="8" class="blocks"></div>
    </div>

</div>

<div id="player1" class="players">👵🏿</div>
<div id="player2" class="players">👵🏻</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading