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>
JS
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) }
Advertisement
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>