Javascript 了解onclick以及如何将其添加到li'；s

因此，我使用JS（仅JS）创建了一个列表，列出了存储在a中的li的哪些房屋对象

当我点击一个li时，我希望更新相应的分数，但我似乎不明白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);};

var a=[]//我有一个包含所有不同对象的全局数组变量
函数getChants（）{//这个函数对于手头的问题来说并不重要，我只是想说明在其中调用了createListofLis
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
//document.getElementById（“demo”）.innerHTML=
//此.getResponseHeader（“上次修改”）；
a=JSON.parse（this.responseText）；
控制台日志（a）；
createListofLis（）；
}
}   
open（“GET”，“chants.json”，true）；
xhttp.send（）；
}
函数createListofLis（）{
d=document.getElementById（'屏幕外'）
而（d.firstChild）{//在再次添加到ul之前必须完全清除ul。这可能是低效的，只是试图得到一个有效的解决方案
d、 removeChild（d.第一个孩子）；
}
为了（用a）唱圣歌{
节点=document.createElement（“LI”）；
node.onclick=updateScore（node.innerHTML.substring（0，node.innerHTML.indexOf（'-'））；//将文本附加到
。代码的故障部分
snippet=a[chant]。chant+“--->”+a[chant]。score+“\n”；
console.log（代码段）；
textnode=document.createTextNode（代码段）；
node.appendChild（textnode）；
d、 追加子节点；
}
};
函数updateScore（chant）{//这是更新对象得分值的功能
//a[chant].score+=1；//我将其注释掉，因为它不断给我一个引用错误，表示分数未定义，我希望这是根据单击li更新分数的地方
console.log（chant）；}；

基本上，当我运行createListofLis函数时，代码是：

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

node.onclick=updateScore（node.innerHTML.substring（0，node.innerHTML.indexOf（'-'））；//将相关文本附加到

我希望updateScore不会运行。我希望li具有onclick属性，其中li的innerHTML值查找相关分数并向其添加1。我不明白这为什么不起作用——当我打开控制台并查看元素时，我没有看到绑定到每个li元素的onclick属性。相反，每当createListofLis运行时，该函数看起来都在运行

顺便说一句，我是JS的新手，所以要善良：）

此代码：

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

导致立即调用

updateScore

函数，将其返回值（即

undefined

）分配给onlick处理程序，因此不会添加实际的处理程序

替换为：

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

---

使用

li.addEventListener（'click'，handler）

而不是

onclick

。如回答中所述，您没有正确使用EventHandler。单击

onclick

并不是什么特别的事情，而是EventHandler通常是如何工作的。我建议你看一看好的教程，了解它们是如何工作的。但基本上，Eventhandler是在事件发生时被调用的函数。例如，通过

onclick=function（）{…}

将函数绑定到

onclick

。当点击发生时，该函数将被调用。在

onclick

上使用

attachEventListener

不是强制性的，除非您想确保支持尽可能多的浏览器。我相信这会让我走上正确的道路。我没意识到我马上就给它打电话了。只是想知道为什么它一直告诉我“UncaughtTypeError:无法读取HTMLLIElement.node.onclick（scripts2.js:58）的updateScore（scripts2.js:75）上未定义的属性‘score’”，我想这是另一个问题了？这个问题中的

updateScore

只执行

console.log

我在它上面有一行未注释的代码。我正在试着运行它。我碰巧遇到了c&p，当时我把它切换为未注释