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

Question

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

我做了一个循环遍历所有值的循环，当我按下一个按钮时，它会检查所有输入，而不仅仅是我点击的那个。我只是想让它检查我正在点击的那一个。

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");
        }
    })
});

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

How do I get the index of a clicked button?

javascript

arrays

ecmascript-6

nodelist