Understanding onclick and how to add it to li's

Question

So I'm using JS (only JS) to create a list of li's which house objects stored in a.

When I click an li I expect to have the corresponding score updated but I don't seem to understand how elements are created by JS.

var a = []; //I have a global array variable housing all different objects
function getChants() { //this function is not really important for the question at hand, I just wanted to show createListofLis is called in it
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //document.getElementById("demo").innerHTML =
        //this.getResponseHeader("Last-Modified");
        a = JSON.parse(this.responseText);
        console.log(a);
        createListofLis();
    }
}   
xhttp.open("GET", "chants.json", true);
xhttp.send();
}

function createListofLis(){ 
d = document.getElementById('outscreen')
while (d.firstChild) { //have to clear the ul completely before adding to it once again. this is probably inefficient, just trying to get a working solution
    d.removeChild(d.firstChild);
}
for (chant in a){ 
    node = document.createElement("LI");
    node.onclick = updateScore(node.innerHTML.substring(0, node.innerHTML.indexOf('-')));                        // Append the text to <li>. trouble part of code
    snippet = a[chant].chant + "---->" + a[chant].score + "\n";
    console.log(snippet);
    textnode = document.createTextNode(snippet);
    node.appendChild(textnode);      
    d.appendChild(node);
}
};

function updateScore(chant){ //this is what's supposed to update the objects score value

//a[chant].score += 1; //i have this commented out because it keeps giving me a reference error saying that score is undefined, i would like this to be where the score is updated based on clicking the li
console.log(chant);};

So basically when I run createListofLis function the code:

node.onclick = updateScore(node.innerHTML.substring(0, node.innerHTML.indexOf('-')));                        // Append the relevant text to <li>

I expect for the updateScore to NOT run. I expect the li to have the onclick property where the li's innerHTML value finds the relevant score and adds 1 to it. I don't understand why this is not working - when i open up the console and look at the element, i do not see an onclick property binded to each li element. Instead it looks like that function is running whenever createListofLis runs.

Btw I'm new to JS so be kind :).

Answer 1

This code:

node.onclick = updateScore(node.innerHTML.substring(0, node.innerHTML.indexOf('-')));

Is causing the updateScore function to be called immediately, assigning its return value (ie undefined ) to the onlick handler, thus no actual handler is added.

Replace it with:

node.onclick = function() {
  updateScore(node.innerHTML.substring(0, node.innerHTML.indexOf('-')));
}