Question

我正在创建一个琐事游戏，您必须在其中猜测一些国家的国旗的名称。我使用querySelectorAll选择了所有输入字段以及您必须单击才能实际执行GUESS代码的所有按钮。我还用正确的答案制作了一个名为“标志”的对象。我需要获取按下的按钮的索引，以便将输入值与按钮的索引和flags对象的索引进行比较，因为它们具有相同的索引来检查输入值是否与标志匹配。

我做了一个for循环，遍历了所有值，当我按下一个按钮时，它检查了所有输入，而不是我所单击的输入。我只希望它检查我要单击的那个。

const inputs = document.querySelectorAll(".input-flag");
const buttons = document.querySelectorAll(".btn");
const btns = Array.from(buttons);

const flags = [
    "belgium",
    "spain",
    "italy",
    "argentina",
    "venezuela",
    "brazil"
];

buttons.forEach((button) => {
    button.addEventListener("click", (e) => {

        for(let i = 0; i < btns.length; i++) {

            if(btns[i].previousElementSibling.value === flags[i]) {
                console.log("correct");
            } else {
                console.log("incorrect");
            }
        }


    })
});

因此，当我单击一个按钮并且三个输入字段正确且三个错误时，它将记录3个正确和3个错误。我已经搜索了几个小时，但找不到解决方案。我不知道自己的解释是否很好，我是初学者：（

我想单击一个按钮，然后检查其对应的输入字段值

Answer 1

假设按钮，输入和标志的排序方式相同：

buttons.forEach((button, index) => {
    button.addEventListener("click", () => {
        const input = inputs[index];
        const flag = flags[index];
        if (input.value == flag) {
            console.log("correct");
        } else {
            console.log("incorrect");
        }
    })
});

如何获得单击按钮的索引？

1 个答案: