JSFiddle - React, Tailwind, and code Playground

by umbertofontanazza

HTML

<p>1. The <span class="noun">dog</span> and the <span class="noun">kitten</span> play with the <span class="noun">ball</span>.</p> 
<h3>Score: <span id="results1"></span> out of 9</h3>

CSS

.hovered {
  color: red;
}

JavaScript

var nounAll = document.querySelectorAll('.noun');
var score = 0;
var result1 = document.querySelector('#result1');

function updateScore(scr) {
	let scoreSpan = document.querySelector("#results1")
  scoreSpan.innerHTML = scr
}

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++;
        updateScore(score)
    });   
}
document.getElementById("results1").textContent = score;