为什么在 javascript 循环中嵌套的 foreach 不起作用？

Question

我正在尝试检查用户的回答是否正确。用户的答案存储在变量“stad”中。正确的选项存储在变量“collectie”中。但是，这个变量是一个带有嵌套数组的数组。所以我首先循环遍历“collectie”，检查 collectie 元素是否不是数组，如果不是，检查提交的值是否在这个 collectie 元素内。

如果 collectie 元素是一个数组，我必须稍微改变函数以便变量检查答案是否在嵌套数组中。

我有以下内容：

function nakijken() {
var collectie = ["parijs", "8", "ijsselmeer", ["Volkswagen", "Audi", "Opel", "Porsche", "BMW", "Mercedes", "Mercedes-Benz"],
["Texel", "Vlieland", "Terschelling", "Ameland", "Schiermonnikoog"]];
var stad = [];
var a = 0;
stad.push(document.getElementsByTagName("input"));
collectie.forEach(uitpakken);
function uitpakken(antwoord) {
    if (!Array.isArray(antwoord)) {
        stad.forEach(myfunction);
        function myfunction(item) {
            if (antwoord.includes(item.value.toLowerCase())) {
                item.style.background = "green";
                a++;
            } else {
                antwoord.style.background = "red";
            }
        }
    }
    else{
        antwoord.Foreach(uitpakken);
        function uitpakken(antwoord) {
        stad.forEach(mysecondfunction);
            function mysecondfunction(item) {
                if (antwoord.includes(item.value.toLowerCase())) {
                    item.style.background = "green";
                    a++;
                } else {
                    antwoord.style.background = "red";
                }
            }
        }
    }
}

但是，我收到错误消息：item.value 未定义。在控制台中，我看到该项目是输入的集合，而不是单个输入。

为什么这不起作用？

Answer 1

主要问题似乎在

stad.push(document.getElementsByTagName("input"));

因为这会将返回的元素集合作为单个引用推送到 stad 中（而且 HTML 集合不是真正的数组）。相反，您可以使用

stad = Array.from(document.getElementsByTagName("input"));

其次，在 if 语句的第一个分支中， antwoord 不是数组， if (antwoord.includes(item.value.toLowerCase())) 是什么意思？您可能想使用简单的比较，例如 if (antwoord === item.value.toLowerCase()) .

第三，有一处错字是Foreach而不是forEach。

第四，您确定要循环遍历主正确答案数组中每个条目的所有输入框吗？每个输入框不都对应一个特定的问题，有特定的正确答案或一组正确答案吗？

Answer 2

document.getElementsByTagName 不是 return 一个数组，它 return 是一个活动的 HTML 集合，不能迭代使用 forEach，尽管您可以通过索引号 (https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName).
引用其元素此外，您然后将整个集合作为一个项目推送到 stad 数组，这就是为什么您看到 item 是输入的集合——该集合（实时 HTML 元素) 是 stad 数组中的只有项。

正如另一个答案所建议的，不是使用 stad.push，而是通过从集合中创建一个数组来简单地将一个真正的数组分配给 stad：

stad = Array.from(document.getElementsByTagName("input"));

为什么在 javascript 循环中嵌套的 foreach 不起作用？

why nested foreach within javascript loop not working?

javascript

nested-loops