带有通过div值传递的onclick函数的appendChild

Question

大家好，

我昨天在这个功能上整整一天都在磨练，但是我一直盘旋着，会 感谢您的任何意见或建议。

目前，我想在div（匹配选项卡）上创建一个onclick函数，单击该函数会将其值发送到我的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);
}

如您所见，“最近的匹配”功能根据可用的匹配数据量来渲染“匹配”选项卡的数量。

前端看起来像这样，就像您看到的那样，它是未定义的。

我真的很想用香草JavaScript编写整个应用程序，因为我是新手，并且想要在迁移到其他框架和库之前学习它。

谢谢

Answer 1

所以我的问题的答案是这样一个事实，即我必须将matchTab.onclick = foo(x);更改为matchTab.onclick = function(){foo(this.value)};，这使我能够获取JavaScript中分配的值。感谢您的所有输入！