代码不能正常工作，你能找出问题吗？

Question

您好，所以我参加了在线课程，老师试图教我们一个气泡 animation，如下所示： https://drinkcann.com/但更简单，他只想让气泡动画，但由于某种原因我的代码没有工作：

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

您有多个问题：

1-您的代码没有正确缩进，我导致错误，这是一个更易读的代码：

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- 在您的 randomNumber() function 上，您没有指定最大参数

3-您是否在页面加载后加载了脚本。 您可以将defer添加到您的脚本声明中，例如

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

它使脚本在加载完其他所有内容之后加载和执行没有你尝试在可以访问之前到达正文

document.querySelector("body")

4-当您发布问题时，请确保帮助我们了解您所做的事情，例如，您使用 JS，因此请向我们展示您在控制台中遇到的错误