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

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) => {&nbsp; &nbsp; button.addEventListener("click", () => {&nbsp; &nbsp; &nbsp; &nbsp; const input = inputs[index];&nbsp; &nbsp; &nbsp; &nbsp; const flag = flags[index];&nbsp; &nbsp; &nbsp; &nbsp; if (input.value == flag) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("correct");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("incorrect");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })});