Question

制作子手游戏。我的addEventListener未与我的函数通信。错误的答案计数器仍然上升，因此那里有一点生命……

我有一个输入框和一个按钮，它可以正常工作。但是为了改善外观，我为每个字母添加了一个按钮，并尝试使用onClick和addeventListener，但无法使其正常工作。

function createLetterKeys(id, text, value) {
    var letterKey = document.createElement("div");
    letterKey.setAttribute("id", id);
    letterKey.innerHTML = text;
    letterKey.setAttribute("class", "keys");
    letterKey.addEventListener("click", playGame);
    lettersDiv.appendChild(letterKey);
}

createLetterKeys("a", "a", "a");

function playGame() {
    var guess = document.querySelectorAll("keys").value;
    var wrong = true;
    if (guessList.includes(guess)) {
        alert("You've already used that letter. Try again...");
    }
    if (guess == letter1) {
        document.getElementById("let1").innerHTML = guess;
        guessedRight.push(letter1);
        counter--;
        wrong = false;
        guessList.push(guess);
    }
    if (guess == letter1) {
        document.getElementById("let1").innerHTML = guess;
        guessedRight.push(letter1);
        counter--;
        wrong = false;
        guessList.push(guess);
    }

上面是代码示例（在我的代码中重复）。 GUESS变量似乎没有任何信息...

Answer 1

我相信您只是忘记在.keys上添加（使用点来按类名选择元素）。

var guess = document.querySelectorAll(".keys").value;

Answer 2

document.querySelectorAll返回一个NodeList，其中包含与选择器匹配的所有元素。但这实际上是您所有的字母-不仅是单击（猜测）的字母。而且，NodeList没有“值”属性。这就是为什么您在“ guess”变量中什么都没得到的原因。

如果我是对的，那么您实际上需要单击的字母元素。在playGame（）函数中使用this.id以获得被点击元素的ID。由于元素的ID是字母，因此您可以轻松获得猜出的字母：

var guess = this.id;

稍后编辑：为此，我在https://jsfiddle.net/o57nd0L1/3/

上添加了有效的JSFiddle

我的addEventListener没有链接到我的函数...任何帮助表示赞赏

2 个答案: