I have a score variable and I'm trying to add 1 to it every time a word is clicked, and display the score on the webpage. Here is the html:
<p>1. The <span id="noun">dog</span> and the <span id="noun">kitten</span> play with the <span id="noun">ball</span>.</p>
<h3>Score: <span id="results1"></span> out of 9</h3>
and here is the javascript:
var nounAll = document.querySelectorAll('#noun');
var score = 0;
var result1 = document.querySelector('#result1');
for(var i = 0; i < nounAll.length; i++) {
console.log(nounAll[i].textContent)
nounAll[i].addEventListener("mouseover",function()
{
this.classList.add("hovered")
});
nounAll[i].addEventListener("mouseout", function()
{
this.classList.remove("hovered")
});
nounAll[i].addEventListener("click", function()
{
this.classList.toggle("clickedOn")
score++;
});
}
document.getElementById("results1").textContent = score;
What am I doing wrong?
Your score variable is working fine. You just need to update the Score element:
nounAll[i].addEventListener("click", function()
{
this.classList.toggle("clickedOn")
score++;
// Add the below line
document.getElementById("results1").textContent = score;
});
The problem is that after the click event is fired, you don't assign the new score to your target DOM element on every action.
nounAll[i].addEventListener("click", function()
{
this.classList.toggle("clickedOn")
score++;
document.getElementById("results1").textContent = score; // add this line to your click event handler
});
var nounAll = document.querySelectorAll('#noun');
var score = 0;
var result1 = document.querySelector('#result1');
for(var i = 0; i < nounAll.length; i++) {
console.log(nounAll[i].textContent)
nounAll[i].addEventListener("mouseover",function(e)
{
e.target.classList.add("hovered")
});
nounAll[i].addEventListener("mouseout", function(e)
{
e.target.classList.remove("hovered")
});
nounAll[i].addEventListener("click", function(e)
{
e.target.classList.toggle("clickedOn")
score++;
document.getElementById("results1").textContent = score;
});
}<p>1. The <span id="noun">dog</span> and the <span id="noun">kitten</span> play with the <span id="noun">ball</span>.</p>
<h3>Score: <span id="results1"></span> out of 9</h3>