why nested foreach within javascript loop not working?

Question

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?

item is a string or array. It has no value attribute.

J. Titus
– J. Titus

2022-02-06 00:59:07 +00:00
Commented Feb 6, 2022 at 0:59 — J. Titus
– J. Titus, Commented Feb 6, 2022 at 0:59

Noam · Accepted Answer · 2022-02-06 01:51:31Z

1

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?

answered Feb 6, 2022 at 1:51

Noam

1,6348 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elunomas · Accepted Answer · 2022-02-06 19:29:22Z

1

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

answered Feb 6, 2022 at 19:29

elunomas

1716 bronze badges

Collectives™ on Stack Overflow

why nested foreach within javascript loop not working?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related