使用 appendChild(iDiv) 向 div 元素添加点击事件时获取错误参数

Question

我正在尝试使用 appendChild(iDiv) 将点击事件添加到 div 元素，但我得到了错误的参数。

这是我的代码：

function showHand() {
    fetch('http://127.0.0.1:5000/showHandPlayer1')
        .then(response => response.json())
        .then(data => {
            for (z = 0; z < data.length; z++) {
                console.log(z);
                var iDiv = document.createElement('div');
                iDiv.id = 'card'+z;
                iDiv.innerHTML = data[z] + ' - ' + z;
                iDiv.addEventListener('click', function() {playCard(z)}, false); 
                document.getElementById('hand').appendChild(iDiv);
            }
        });
}
function playCard(i) {
    fetch('http://127.0.0.1:5000/playCard/'+i)
        .then(response => response.text())
        .then(data => {
        console.log(data + " is played.");
    });

fetch 正在返回列表 ["Yellow0"、"Red5"、"RedDirection"、"ChangeCollor"]

这是检查器中的结果：

在控制台中我得到这个错误：

TypeError: NetworkError when attempting to fetch resource.

TypeError: x is null
uno.html:22:4
Forespørgsel til fremmed websted blokeret: Politikken for samme oprindelse tillader ikke læsning af fjernressourcen http://127.0.0.1:5000/playCard/4. (Årsag: CORS-headeren 'Access-Control-Allow-    Origin' findes ikke).

我在所有 4 个 div 中单击它们时都遇到相同的错误。它指的是 http://127.0.0.1:5000/playCard/4，而我的列表中只有 0,1,2,3。为什么会这样，我怎样才能让 clickevent 看起来像这样： onclick="playCard(0)", onclick="playCard(1)", onclick="playCard(2)", onclick="playCard(3)"

后端服务器通过 "IndexError: list index out of range" 因为 4 不是它所期望的。

Answer 1

每当您单击 div 时，z 的值将成为 for 循环的最后一个值。为了防止这种情况，您需要将这些行包装在一个闭包中。

for (let z = 0; z < data.length; z++) {
    (function(index) {
        console.log(index);
        var iDiv = document.createElement('div');
        iDiv.id = 'card'+index;
        iDiv.innerHTML = data[index] + ' - ' + index;
        iDiv.addEventListener('click', function() {playCard(index)}, false); 
        document.getElementById('hand').appendChild(iDiv);
    })(z) 
}

有关闭包的更多信息，请查看 mdn docs

使用 appendChild(iDiv) 向 div 元素添加点击事件时获取错误参数

Getting the wrong parameters when adding a click event to a div element with appendChild(iDiv)

javascript

appendchild

fetch