Вызвана функция, консоль говорит, что она анонимная

Question

У меня проблема с созданием этой игры в две кости. Я думаю, что проблема заключается в переменных diceDOM, я получаю сообщение об ошибке в консоли, говорящее «Невозможно установить свойство« отображение »неопределенного в init», а в консоли говорится, что init (); Вызов не определен.

Два кубика, которые я хочу сохранить в этой переменной, имеют один и тот же класс .dice. Это потому, что я должен сохранить их отдельно в массиве?

Код ниже, я пропустил код между:

 var scores, roundScore, activePlayer, dice1, dice2, diceDOM, gamePlaying;

// var userInput = Number(document.getElementById("userScore").value);
diceDOM = document.querySelectorAll(".dice");
init();

function init() {
    roundScore = 0;
    scores = [0, 0];
    activePlayer = 0;
    diceDOM.style.display = "none";
    document.getElementById("score-0").textContent = 0;
    document.getElementById("score-1").textContent = 0;
    document.getElementById("current-0").textContent = 0;
    document.getElementById("current-1").textContent = 0;
    document.querySelector(".player-0-panel").classList.remove("active");
    document.querySelector(".player-0-panel").classList.add("active");
    document.querySelector(".player-1-panel").classList.remove("active");
    document.querySelector(".player-0-panel").classList.remove("winner");
    document.querySelector(".player-1-panel").classList.remove("winner");
    document.getElementById("name-0").textContent = "Player 1";
    document.getElementById("name-1").textContent = "Player 2";
    document.getElementById("userScore").value = "";
    gamePlaying = true;
};

Заранее спасибо!

Answer 1

Когда вы используете querySelectorAll, он возвращает все элементы, которые совпадают в объекте NodeList. если вы просто хотите получить первый div с классом dice, вы можете сделать

diceDOM = document.querySelector(".dice");

В противном случае вам потребуется доступ к каждому элементу ->

diceDOM[index].style.display = "none";

Answer 2

document.querySelectorAll возвращается с Array!

Вы должны использовать

diceDOM[0].style.display = "none";

Конечно, если у вас есть больше .dice элементов, то вы должны выполнить итерации через diceDOM и установить элемент стиля по элементу:

diceDOM.forEach((i) => { i.style.display = 'none'; });

Answer 3

diceDOM - это список узлов, что означает, что это набор элементов, и у него нет свойства стиля, вам нужно перебирать каждый элемент diceDOM и устанавливать для его отображения значение none, поэтому вместо:

diceDOM.style.display = "none";

Do:

diceDOM.forEach(function(dice) {
    dice.style.display = "none";
})