Solution 1 :

You have multiple problems :

1- you code isn’t properly indented, i lead to errors, here is a more readable code :

var numberOfbubbles = 10
for (let i = 0; i < numberOfbubbles; i++) {
    newBubble()
}

function newBubble() {
    let bubble= document.createElement("div");
    bubble.classList.add("bubble");

    let x = randomNumber(100);
    let delay= randomNumber(3000)

    bubble.style.left = x + "vw";
    bubble.style.animationDelay = delay + "ms";

    document.querySelector("body").appendChild(bubble);
}

function randomNumber(max) {
    return Math.floor(Math.random() * max)
}

2- On your randomNumber() function, you did not specified max argument

3- Did you load the script after the page is loaded. You can add defer to your script declaration like

<script defer src="script.js" charset="utf-8"></script>

It make that the script is loaded and executed after everything else is loaded
Without that you try to reach the body before it can be accessed

document.querySelector("body")

4- When you posting a question, make sure to help us understand what you did, for exemple, you use JS, so show us the errors you have in console

Problem :

Hello so i did online classes and the teacher tried to teach us an bubble animation like this: https://drinkcann.com/ but like it was more simple he only wanted to make the bubble animated but for some reason my code doesn’t work:

var numberOfbubbles = 10
for (let i = 0; i < numberOfbubbles; i++) {
newBubble()
    }
function newBubble() {
let bubble= document.createElement("div");
                                  bubble.classList.add("bubble");
                                  let x = randomNumber(100);
                                  let delay= randomNumber(3000)
                                  bubble.style.left = x + "vw";
                                  bubble.style.animationDelay = delay + "ms";
                                  document.querySelector("body").appendChild(bubble);
                                  }
                                  function randomNumber() {
                                  return Math.floor(Math.random() * max)
                                  }
                                  ```
the html code has an html:5 standard and just a div so can you tell me where is the problem in my code?,let me know if you want to post something else too
css code: https://codeshare.io/5Nn8PJ

Comments

Comment posted by Piturca Stefan

when i do inspect or look in vs code it has no errors.on the random number i followed a max formula ftom the site so i gotta rewrite the code or just add something to it to make it work?,my bubble only does the scale animation and i have to make it be multiple bubbles that go to the left and up how i do that?,in the html there is defer added yeah.

Comment posted by Ora_Veugle

You just have to add max as an argument

Comment posted by Piturca Stefan

and i can set it to whatever value i want?

By