Code not working like it should,can you find out the problem?

Question

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

Answer 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