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