Получение неправильных параметров при добавлении события click к элементу div с appendChild (iDiv) - PullRequest
Новая
       36

Получение неправильных параметров при добавлении события click к элементу div с appendChild (iDiv)

0 голосов
/ 05 апреля 2020

Я пытаюсь добавить событие click к элементу div с appendChild (iDiv), но у меня неверные параметры.

Это мой код: 

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"]

Это результат в инспекторе:

enter image description here

В консоли я получаю эту ошибку: 

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-х элементах при нажатии на них. Это относится к http://127.0.0.1: 5000 / playCard / 4 , а в списке всего 0,1,2,3. Почему это так и как сделать так, чтобы кликвент был похож на: onclick = "playCard (0)", onclick = "playCard (1)", onclick = "playCard (2)", onclick = "playCard (3)"

Внутренний сервер выдает «IndexError: list index out of range», потому что 4 не соответствует ожиданиям.

1 Ответ

0 голосов
/ 05 апреля 2020

Всякий раз, когда вы нажимаете на свой div, значение z будет последним вашим значением для l oop. Чтобы предотвратить это, вам нужно завернуть эти строки в замыкание. 

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

...