Please help me fix errors in this code.

Question

I created a very basic code. It technically works but it gives me errors There is nothing fancy. Only 2 functions to open or close a nav menu. It works OK but tells me that those elements are undefined.

https://code.sololearn.com/W2Q4f0f1K42x/?ref=app

Answer 1

Um... To tell the truth, I don't understand what code's parts with error must do(yes, I'm great programmer). Would you like tell me, please?

Answer 2

Okay, I understood this and some things: string "var i = 0;" is extra in the code, if delete it, nothing changes(proof is https://code.sololearn.com/WydylaWAv27d/?ref=app ) and consequently "for(i in menu)" works in js like in python almost(by the way, why?), but gives error(because js isn't python anyway)
It's all which I understood yet
Upd.: I found [the easiest] solution:
https://code.sololearn.com/W4XNkanvHEmd/?ref=app
Are you satisfied with everything in it?

Answer 3

Thank you ODLNT for your effort to help but alas your solution does not work. In fact for...of breaks open/close functionality :((

Let me reiterate. I select HTML elements to apply styles to them afterwards NOT properties. In other words I want to tell every member of my Sims family to put their outfits on WITHOUT calling them one by one (using ID's in this case).

Answer 4

Oh TheBot - Бот r-33076 Thanks for reminding I need to apply the fixes :))

So I found a little oddity (which probably works odd on my device only but still) with looping through the array of elements selected by class name. The code works fine but the for in loop always selects a non-existing element. Probably because array indexes start at 0 and array length starts at 1. That's the only thing I understood ;)

Anyway I'm always glad to find something tricky. It's very interesting and things you find out yourself stay in memory much longer.

Answer 5

You should use the for...of statement instead of the for...in statement.

Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over.

The for...in statement iterates over the enumerable properties of an object, in an arbitrary order.
The HTMLCollection menu has 6 enumerable properties:
Three div elements
length,
item,
,and namedItem

The for...of statement iterates over values that the iterable object defines to be iterated over.

HTMLCollection menu has 3 iterable properties:
Three div elements

As you can see using the for...in statement is causing the error, by iterating over a property that isn't a DOM element.

To reiterate😉, use the for...of statement.

Source: MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 6

Here's the corrected version of your code
https://code.sololearn.com/WPnELz4V36R1/?ref=app
I have just used "for" loop in place of "for in loop" you can check in the code above.

Answer 7

You can use for...in loop to iterate over objects.

Answer 8

And for...of loop is used to iterate over arrays

Answer 9

https://code.sololearn.com/WM728lefl5yz/#js