JS why won’t this for loop work?

Question

I created elements. And then gave them class names.
But for some reason it’s giving me undefined
sudes[x] nor defined.

sides = [“top”, “bottom”...]
for (i...){
createElement()
for (x...){
...className += sides[x] + “side”;
}
}

^Thats kind of a visual of what I’m saying (above).

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

Answer 1

because side[x] is not an array,thats why it is undefined

Answer 2

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

is this what u want to do?

Answer 3

Lily Mea
umm, not exactly.
In the first for loop I have <= 5.
What I’m trying to do there is to create 5 elements with the className of sides[] + “ side”.

So for example the first element className would be:
sides[0] + “ side”.

“back side”

second element would be
sides[1] + “ side”.

“front side”
....

Answer 4

Not seen your last post before sending my answer ^^

For more than one cube added, you mostly have to repeat the operation:

onload = function() {
var co = cument.querySelector('.container');
for (var i=0; i<3; ++i) {
document.body.appendChild(co.cloneNode(true));
}
};

Unfortunaly, the third and next cubes are outside of the viewport (at least on my device), so you need probably to reduce the size of the cube to maximize probability to have more than two visibles...

Answer 5

visph That works. Thanks!

Do you know y my looping wasn’t workin

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

Answer 6

Because your loops logic is quite a mess ^^

First the error displayed, is due to similar problem than previouly: you attempt to access an array, but that's not one... you must replace:

cube[y].className = 'cube';

by:

cube.className = 'cube';

... but even if that avoid the error message, the logic is bad, and you don't have the expected result...

Try to solve it by yourself, during the time for me to write more explanations (It's very late for me, and writting in english is highly tiring for me :P

Answer 7

visph it’s very late for me too.

I’m trying to loop,but failed.

if js to english it be like this.
...
———-
create 20 “div” elements.
each cube have a className of “cube”
———-

I was trying to create 20 elements and loop through the 20 elements so each couls have class.. “cube”.

Answer 8

Yes, I have understood your purpose... I'm currently writting explabations: be patient, and else go to sleep... it could help you to get a new look on your code (and on my explanation) after few hours of sleep (sometimes with tiredness we stuck with a problem during hours, while just keeping some rest would have saved uselessly lost... (I'm very tired too, and was lost after my last post inside your different versions of your code -- the good news is that my version, the one you've reproduced in the code version linked to the question, is working, and much more than 3 cubes are visibles now, and I've tested with 20 cubed without problem ;))

Answer 9

WHY YOUR "LOOPING WASN'T WORKIN" (part 2/3 - doesn't fit in one post)
(not at attempt to fix it: you'll have to do, if you want, but fixing it in this case means rewrite completly, and you will not learn by this way ;))

var sides = ['back',
'front',
'left',
'right',
'top',
'bottom'];

// here you start a 6x loop to append 6 sides to...
// MMHHHH... LET'S SEE: we need to append 6 sides to EACH 6 cubes
// ... and what you're actually preparing to do is append 6 sides
// to the last created cube reference :P

for (var i = 0; i < sides.length; i++){
var side = document.createElement('div');
side.className += sides[i] + " side"
cube.appendChild(side)
}

Answer 10

WHY YOUR "LOOPING WASN'T WORKIN" (part 3/3 - doesn't fit in one post)
(not at attempt to fix it: you'll have to do, if you want, but fixing it in this case means rewrite completly, and you will not learn by this way ;))

/* so you end up with an html createad such as:

<div class="container">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
.
.
.
<div class="cube">
<div class="back side"></div>
<div class="front side"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="top side"></div>
<div class="bottom side"></div>
</div>
</div>

all the 19 first 'cube' are empty, there's only once container
(so it should change the specificity of the css selectors, and
should break the design) BUT MAINLY, there's a last forgot: did
you see what with the html produced displayed? LABEL'S FACES...
*/
}

Answer 11

visph Thanks for all that work snd help!

So, i removed the part that says ...
for example: element[x]
I removed the “[x]”.
and it seems to be working fine.

I thought maybe I had to loop theough each element to get all of them involved_
.
https://code.sololearn.com/Wud55NEsQo7N/?ref=app

Answer 12

hmm.
Lily Mea
I’m trying to make multiple cubes, and i was doing it wrong.

I just got that fixed, but I got the same problem at a diffrent line.

This time what I’m trying to do is loop through the cube element.

And put their className as “cube”.

cube[0].className = “cube”;
cube[1].className = “cube”
...

Answer 13

Could be done in just one line of code:

onload = function() { document.body.appendChild(document.querySelector('.container').cloneNode(true)); }

... try it ;)

Answer 14

visph umm, yeeeah, but I want to multiply it by a certain number.
Like... can we make it to clone 50 of them?

Answer 15

WHY YOUR "LOOPING WASN'T WORKIN" (part 1/3 - doesn't fit in one post)
(not at attempt to fix it: you'll have to do, if you want, but fixing it in this case means rewrite completly, and you will not learn by this way ;))

window.onload = function(){

// here you create a new container

var co = document.createElement("div");
co.className = "container";
document.body.appendChild(co);

// and you append it to the body.

// here you start a 20x loop, to create 20 div with class cube

for (let y = 0; y < 20; y++){

var cube = document.createElement('div');

// cube[y].className = 'cube';
cube.className = 'cube';
co.appendChild(cube);

// and here you append each to the container created at begin...
// WAIT! THERE'S A FIRST LOGICAL ERROR:
// each cube should have its own container ^^

}

// anyway, let's continue the next step... in a next post ;)