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?

CodePudding user response：

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;
    });   

CodePudding user response：

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
});

CodePudding user response：

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>

CodePudding user response：

There are 2 mistakes:

1. Your element IDs are not unique, you want to use classes instead, so change id="noun" to in the HTML and change the selector in document.querySelectorAll accordingly (dot rather than hash).
2. There is a logic error: you are updating a js variable but after you update the variable you also have to change the content of the span accordingly (in the fiddle I have put an example of how you can do that)

My solution