Plus point on each click-CodePudding

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 >
                <img  draggable="true" src="img-game/WOOD/SBD710.png">
                <img  draggable="true" src="img-game/WOOD/SCS220.png">
                <img   draggable="true" src="img-game/WOOD/SB201.png">
                <img  draggable="true" src="img-game/WOOD/SB204.png">
                <img   draggable="true" src="img-game/WOOD/SBG700.png"> <!--incorrect-->
         </section>

        <section >
                <img    draggable="true" src="img-game/WOOD/SB202.png">
                <img  draggable="true" src="img-game/WOOD/SBC550.png">
                <img   draggable="true" src="img-game/WOOD/SCJ600.png">
                <img  draggable="true" src="img-game/WOOD/SC200.png">
                <img   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)

}

CodePudding user response：

I have made the finalScore as global variable based and moved the logic to a function. It is werking 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 >
  <img  draggable="true" src="img-game/WOOD/SBD710.png">
  <img  draggable="true" src="img-game/WOOD/SCS220.png">
  <img  draggable="true" src="img-game/WOOD/SB201.png">
  <img  draggable="true" src="img-game/WOOD/SB204.png">
  <img  draggable="true" src="img-game/WOOD/SBG700.png">
  <!--incorrect-->
</section>

<section >
  <img  draggable="true" src="img-game/WOOD/SB202.png">
  <img  draggable="true" src="img-game/WOOD/SBC550.png">
  <img  draggable="true" src="img-game/WOOD/SCJ600.png">
  <img  draggable="true" src="img-game/WOOD/SC200.png">
  <img  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")) {
      e.target.classList.add("correct-tool")
      finalScore = finalScore   100;
      console.log(finalScore) // here 
    }
  });
}

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

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