Javascript - When element is clicked add 1 to score

Question

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?

ID can only be used once in a document. If you want to target multiple elements you have to use classes. — cloned, Dec 10 '21 at 11:18
But to get the change showing you need to put the line `document.getElementById("results1").textContent = score;` inside the click handler. (changing `score` doesn't magically update earlier assignments that used the variable) — pilchard, Dec 10 '21 at 11:20
The first two event handlers are not necessary. You can do that with pure CSS and the `:hover` pseudo selector -> `span.noun { /* style for the "non-hovered" state */ } span:hover { /* style for the hovered state */ }` — Andreas, Dec 10 '21 at 11:24

score 3 · Answer 1 · answered Dec 10 '21 at 11:22

3

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

answered Dec 10 '21 at 11:22

Deepak

2,660
2
8
23

That worked, thanks! Is there any way for me to remove 1 from score when the same word is clicked again? Thanks for your help – mccal6304 Dec 10 '21 at 11:27
Yes you can. Maybe if you have some array like wordsClicked, then probably you can push that word to that array during first click, and pop on next click. Code isn't tested but its like: if (wordsClicked.includes(event.target.innerText)){ score--; wordsClicked.splice(wordsClicked.indexOf(event.target.innerText), 1) } else{ score++; wordsClicked.push(event.target.innerText) } – Deepak Dec 10 '21 at 11:33

score 0 · Answer 2 · answered Dec 10 '21 at 11:23

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

score 0 · Answer 3 · answered Dec 10 '21 at 11:25

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>

score 0 · Answer 4 · answered Dec 10 '21 at 11:35

There are 2 mistakes:

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).
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

Javascript - When element is clicked add 1 to score

4 Answers4