Plus point on each click

I am making a game with img´s each time that the user clic on the correct img win 100 points but i dont get the summations of the points i dont know why

The final score still 0

HTML

         <section class="draggable-items">
                <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
                <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
                <img  class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
                <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
                <img  class="draggable " draggable="true" src="img-game/WOOD/SBG700.png"> <!--incorrect-->
         </section>

        <section class="draggable-items">
                <img  class="draggable correct"  draggable="true" src="img-game/WOOD/SB202.png">
                <img class="draggable correct" draggable="true" src="img-game/WOOD/SBC550.png">
                <img  class="draggable correct" draggable="true" src="img-game/WOOD/SCJ600.png">
                <img class="draggable correct" draggable="true" src="img-game/WOOD/SC200.png">
                <img  class="draggable " draggable="true" src="img-game/WOOD/SBH900.png"> <!--incorrect-->
        </section>

const correctTool = document.getElementsByClassName("draggable")
let finalScore = 0 ;
for (i = 0; i < correctTool.length; i++){
    correctTool[i].addEventListener("click", e => {
        if (e.target.classList.contains("correct")){
            e.target.classList.add("correct-tool")
            finalScore = finalScore + 100;
        }
    });

    console.log(finalScore)

}

Answer

I have made the finalScore as global variable and moved the logic to a function. It is working as expected. Final score gets added each time a image is clicked with draggable class.

Option 1 is much cleaner approach. Logic is separated in a function. code must be divided into smaller functions so that it easy to understand.

var finalScore = 0;
var elements = document.getElementsByClassName("draggable");

var myFunction = function(e) {
    if (e.target.classList.contains("correct")) {
      e.target.classList.add("correct-tool");
      finalScore = finalScore + 100;
      console.log(finalScore);
    }
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

<section class="draggable-items">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
  <img class="draggable " draggable="true" src="img-game/WOOD/SBG700.png">
  <!--incorrect-->
</section>

<section class="draggable-items">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB202.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SBC550.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SCJ600.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SC200.png">
  <img class="draggable " draggable="true" src="img-game/WOOD/SBH900.png">
  <!--incorrect-->
</section>

Your code –

const correctTool = document.getElementsByClassName("draggable")
let finalScore = 0;
for (i = 0; i < correctTool.length; i++) {
  correctTool[i].addEventListener("click", (e) => {
    if (e.target.classList.contains("correct")) {
      if(e.target.classList.contains("correct-tool")){ return; }
      else { e.target.classList.add("correct-tool");
      finalScore = finalScore + 100;}
      console.log(finalScore) // here 
    }
  });
}

<section class="draggable-items">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
  <img class="draggable " draggable="true" src="img-game/WOOD/SBG700.png">
  <!--incorrect-->
</section>

<section class="draggable-items">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SB202.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SBC550.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SCJ600.png">
  <img class="draggable correct" draggable="true" src="img-game/WOOD/SC200.png">
  <img class="draggable " draggable="true" src="img-game/WOOD/SBH900.png">
  <!--incorrect-->
</section>

Advertisement

Answer