Javascript - When element is clicked add 1 to score

user_17644108 0
Viewed 137

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?

html javascript
4 Answers

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

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

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>

user_108054790

There are 2 mistakes:

  1. Your element IDs are not unique, you want to use classes instead, so change id="noun" to class="noun" 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

user_91375470
Related