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

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