Javascript это ключевое слово не работает в функции, на которую ссылается addEventListener - PullRequest
Новая
       23

Javascript это ключевое слово не работает в функции, на которую ссылается addEventListener

0 голосов
/ 20 февраля 2020

Я пишу игру тральщика, используя HTML и Javascript, которая позволяет пользователю вводить размер сетки и количество мин, а доска генерируется при нажатии кнопки. Доска состоит из таблицы со строками и ячейками, сгенерированных в Javascript с парой циклов. Внутри al oop находится оператор addEventListener, который должен добавить функцию, вызываемую при нажатии на ячейку.

Моя проблема в том, что я не уверен, как передать каждый отдельный объект ячейки в функция, чтобы я мог поиграть с этим. Я пытался использовать 

this.setAttribute(...)

, но я получаю сообщение об ошибке, которое говорит мне, что this.setAttribute не является функцией. Я знаю, что «это», вероятно, относится к глобальной области, но я не уверен, как решить мою проблему тогда, и у меня были проблемы с поиском решения в другом месте. Вот соответствующий код: 

function createGame(){
    size= document.getElementById("boardSize").value;
    //other stuff
    var table= document.createElement("table");
    table.id= "gameBoard";
    document.body.appendChild(table);
    for(var r= 1; r <= size; r++){
        var row= document.createElement("tr");
        row.setAttribute("id", "r" + r.toString(10));
        document.getElementById("gameBoard").appendChild(row);
        for(var c= 1; c <= size; c++){
            var cell= document.createElement("td");
            cell.setAttribute("id", "r" + r.toString(10) + "c" + c.toString(10));
            cell.setAttribute("class", "uClear");
            cell.innerHTML= "?";                                           
            document.getElementById("r" + r.toString(10)).appendChild(cell);
            cell.addEventListener("click", clickClear);
        }
    }
    //other stuff
}
//the following is in global scope
function clickClear(){
    this.setAttribute("class", "kClear");   //this is undefined
    //other stuff
}

1 Ответ

0 голосов
/ 20 февраля 2020

Я бы сделал это следующим образом, передав ссылку на элемент внутри переменной: 

    size= document.getElementById("boardSize").value;
    //other stuff
    var table= document.createElement("table");
    table.id= "gameBoard";
    document.body.appendChild(table);
    for(var r= 1; r <= size; r++){
        var row= document.createElement("tr");
        row.setAttribute("id", "r" + r.toString(10));
        document.getElementById("gameBoard").appendChild(row);
        for(var c= 1; c <= size; c++){
            var cell= document.createElement("td");
            cell.setAttribute("id", "r" + r.toString(10) + "c" + c.toString(10));
            cell.setAttribute("class", "uClear");
            cell.innerHTML= "?";                                           
            document.getElementById("r" + r.toString(10)).appendChild(cell);
            cell.addEventListener("click",() => clickClear(cell)); // arrow function
        }
    }
    //other stuff
}
//the following is in global scope
function clickClear(element){
    element.setAttribute("class", "kClear");   // pass the element reference instead
    //other stuff
}

Кроме того, вы можете проверить мой блог о создании приложения тральщика PWA с использованием веб-компонентов: https://onecompileman.com/blogs/10

...