Javascript 带有onclick函数的appendChild，该函数通过div'；s值

大家好,

我昨天一整天都在做这个活动，但是我一直在绕圈子，我会 感谢您的任何意见或建议

目前，我想在我的div（match tab）上创建一个onclick函数，当它被单击时，它将把它的值发送到我的javascript，javascript将让函数知道它应该呈现哪个游戏的数据

目前，我的函数如下所示：

    for (x in data){

        var recent_matches_row_one = document.getElementById('recent-matches-row-one');
        var recent_matches_row_two = document.getElementById('recent-matches-row-two');

        var col = document.createElement("div");
        col.className = "col no-padding";

        var matchTab = document.createElement("div");
        matchTab.className = "match-tab";
        matchTab.id = "match-tab";
        matchTab.value = x;
        matchTab.innerHTML = ++x;
        matchTab.onclick = foo(this.value);

        if (x < 15){
            recent_matches_row_one.appendChild(col);
            col.appendChild(matchTab);
        } else if (x > 15) {
            recent_matches_row_two.appendChild(col);
            col.appendChild(matchTab);
        }
    }

}


function foo(value){
    var v = value;
    console.log(v);
}

对于（数据中的x）{
var recent_matches_row_one=document.getElementById（'recent-matches-row-one'）；
var recent_matches_row_two=document.getElementById（'recent-matches-row-two'）；
var col=document.createElement（“div”）；
col.className=“col无填充”；
var matchTab=document.createElement（“div”）；
matchTab.className=“匹配选项卡”；
matchTab.id=“match tab”；
matchTab.value=x；
matchTab.innerHTML=++x；
matchTab.onclick=foo（this.value）；
如果（x<15）{
最近\u匹配\u行\u一。追加子项（列）；
col.appendChild（matchTab）；
}如果（x>15），则为else{
最近匹配第二行。追加子项（列）；
col.appendChild（matchTab）；
}
}
}
函数foo（值）{
var v=价值；
控制台日志（v）；
}

正如您所看到的，最近的匹配函数根据可用的匹配数据量呈现匹配选项卡的数量

前端看起来像这样，您可以看到它被视为未定义

我真的很想用vanilla JavaScript编写整个应用程序，因为我对它还不熟悉，希望在转到其他框架和库之前先学习它

---

谢谢

所以我的问题的答案是我必须更改

matchTab.onclick=foo（x）

to

matchTab.onclick=function（）{foo（this.value）}这允许我获取JavaScript中指定的值。感谢所有的投入
 你试过使用吗？首先：div没有属性值。第二：this.value未定义，因为您没有在任何地方定义名为value的变量。此.value不是matchtab.value。这是变量值。@dev_junwen我有，但是我得到了“Uncaught TypeError:无法读取null的属性'addEventListener'”@DerAlex ah好的，我理解，所以我必须使用事件侦听器，或者使用按钮而不是div？您已经有了带有matchTab.onclick的eventlistener。您只是没有向函数发送正确的数据。如果需要元素上的x值，请尝试使用数据属性。如果只需要将x的值传递到函数中，请尝试以下操作：matchTab.onclick=foo（x）；要理解为什么这不起作用：事件需要函数名，而不是函数调用本身。因此，必须将函数包装为匿名函数。