Why don't the following two codes work together?

Question

I don't have the HTML and CSS, in the following code because I'm just injecting JS into a website, and the HTML elements and the CSS are in the website that I'm injecting.
So, you could just ignore the console.
I want to know what could be wrong with this code just in general. Like when you look at it, maybe somethings aren't supposed to be used together or keyword error...
https://code.sololearn.com/W4lH73J859tR/#js
The error I usually got was "can't read property style of undefined" when I clearly have done that at the top. And that happens when I add the code at line: 101 to 106.
I can make a code later just for this problem if I need to.

Answer 1

Jakob Meier ok. now I at least have the epement that i(/we) need to get.
In the HTML.

This is what I got now:
https://code.sololearn.com/W4lH73J859tR/?ref=app

Answer 2

you are selecting elements that dont exist at that point in time, you have to make shure thatg all elements exist

Answer 3

Jakob Meier
In the website, the element exists, and I did declare it.
But I'll make a code that way it makes more sense.
Would you look at the code for me if I make the code to demonstrate what' going on?

Answer 4

Jakob Meier
I tried to loop all of the empty_spots[] using for(...){...}

Or is the problem with doing this:
...(“.grandma > .mother > .child”)

Answer 5

yes

Answer 6

you are just selecting one html element:
empty_spots[0]=HTMLElement
empty_spots[1]=undefined
that means you can't iterate over it