JS... How to access elements with the same class name?

Question

I created 10 elements using js for ().
Now I want all of those 10 elements to have random margin.
Problem:
1, How do you access all of those elements (they have the same class name and Id)?
2, I keep getting TypeError: .... I don't understand that.

They code I started:

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

Answer 1

It seems I've made a mistake on the previous code but it is now updated....
May I suggest using the HTML <canvas> Element??? It works really well for drawing multiple shapes or images using methods like the
context.arc(100, 75, 50, 0, 2 * Math.PI);... the first two parameters would be the x and y coordinates of the center of the circle, the third is the radius/size of the circle and the last two parameters is the start and finish point of the arc of the circle which the parameter i provided above would be a complete circle... Its just something to consider but i did finish the code you are asking for .
https://code.sololearn.com/WG49VkWOgguz

Answer 2

Anthony Johnson Than You.
I understand it now.
So ... instead of getting the element with id or class, just (do it as we're creating the element (elm).
for(...){
var elem = doc.createEl...(...);
var margn = Math.floor(Math.ra...()*500);

elem.style.margin = margin;
}

Got it.
Thank You for your help + time.

✔️

Answer 3

This is what I have came up with as far as accessing them.
https://code.sololearn.com/WG49VkWOgguz

Answer 4

Anthony Johnson , that works, do you know how I would give them random margin?
I did:
var x = document.querySelector(".bubbles");
x.style.margin = Math.floor(Math.random()*100) + "px";

But the problem is ... Each individual (x) are not taking their own random margin. I want them to take their own random width,so they can spread out everywhere randomly.

Answer 5

It's no problem I'm glad I could help =)