CODEWITHSUNDEEP
javascriptnested-loops
Webdever
Webdever

Reputation: 525

why nested foreach within javascript loop not working?

I am trying to check if the answers from a user are correct. The answers of the user are stored in variable "stad". The correct options are stored in variable "collectie". However, this variable is an array with a nested array. So i first loop through the "collectie", check if the collectie element is not an array and if not, check that the submitted value is within this collectie element.

If the collectie element is an array, i have to alter a little bit the function so the variable checks whether the answer is within the nested array.

I have the following:

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

However, i get the error: item.value is not defined. Within the console, i see that item is a collection of inputs, and not a single input.

Why is this not working?

Upvotes: 0

Views: 226

Answers (2)

elunomas
elunomas

Reputation: 171

document.getElementsByTagName does not return an array, it returns a live HTML collection, which cannot be iterated over with forEach, although you can refer to its elements by index number (https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName).
In addition, you are then pushing this entire collection to the stad array as one item, which is why you see item is a collection of inputs -- that collection (of live HTML elements) is the only item in the stad array.

As another answer suggests, instead of using stad.push, simply assign a real array to stad by creating an array from the collection:

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

Upvotes: 1

Noam
Noam

Reputation: 1604

The main probelm seems to be in

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

because that pushes the returned element collection into stad as a single reference (and also an HTML collection is not a real array). Instead, you can use

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

Second, in the first branch of the if statement, where antwoord is not an array, what does it mean if (antwoord.includes(item.value.toLowerCase())) ? You probably want to use a simple comparison like if (antwoord === item.value.toLowerCase()) .

Third, there is a typo Foreach instead of forEach in one place.

Fourth, are you sure you want to loop through all the input boxes for each entry in the main correct answers array? Isn't each input box corresponding to a specific question with a specific correct answer or set of correct answers?

Upvotes: 1

Related Questions