如何让 JavaScript 脚本停留在其指定元素内？

Question

和罐头上写的差不多。

我有一个 JS 脚本，它没有停留在我的页面上指定的 div 元素内，而是“位于”页脚部分。

<header>

    <div>icon</div>
    <div>header</div>
    <div style="padding:5px;">
    script is supposed to go here
        <script src="JS/SpinningBaton.js"></script>
    </div>
  
</header>

这就是我目前编写 HTML 块以尝试解决该问题的方式。不幸的是，一切都没有改变。我做错了什么？

对于上下文，div 元素的大小为 165px，而 JS 脚本的大小为 155px，因此它应该适合而不会溢出。

我尝试将脚本放在 div 内的不同元素中并调整 div 元素的大小。但无论我到目前为止已经尝试过什么，脚本都会顽固地保留在页脚区域。

SpinningBaton 代码，根据要求 - 我将包含使脚本实际工作的代码，但它超出了限制：

angleMode = "radians";

var angle = 0;
var aVelocity = 0;
var aAcceleration = 0.0001;
// var TargetSpeed = ((Math.random() * 2)-1)/2;

function RandNum(){
    a = Math.floor(Math.random() * 256);
    return a;
}

Num1 = RandNum();
Num2 = RandNum();
Num3 = RandNum();
Num4 = RandNum();
Num5 = RandNum();
Num6 = RandNum();
Num7 = RandNum();
Num8 = RandNum();
Num9 = RandNum();
Num10 = RandNum();
Num11 = RandNum();
Num12 = RandNum();

draw = function() {
    createCanvas(155,155);
    
    resetMatrix();
    translate(width/2, height/2);
    rotate(angle);
    
    stroke(0, 0, 0,0);
    fill(Num1, Num2, Num3);
    
    ellipse(60, 0, 32, 32);
    fill(Num4, Num5, Num6);
    ellipse(-60, 0, 32, 32);
    fill(Num7, Num8, Num9);
    ellipse(0, 60, 32, 32);
    fill(Num10, Num11, Num12);
    ellipse(-0, -60, 32, 32);
    
    if (aVelocity < TargetSpeed)
    {
        aVelocity += aAcceleration;
    }
    else
    {
        aVelocity -= aAcceleration;
    }
    angle += aVelocity;
};

Answer 1

1. 使用 id 或 class 获取该 div 元素
2. 然后在 js 文件中渲染该元素中的结果

参考：- https://www.geeksforgeeks.org/dom-document-object-model/

Answer 2

我不认为 JavaScript 是这样工作的，先生，当你将 JavaScript 脚本放在某种对象（本例中为 div）中时，JavaScript 脚本不起作用，相反，它总是应该放在 HTML 页面的末尾（在通常是正文结束标签）并且它会根据您在其中编写的内容进行工作。

在这里，您将 javascript 视为 html 对象（只是实时 div、段落、标题标签等），但事实并非如此。

如果您可以提供您的 Javascript 代码并更清楚地告诉我您要编写的内容，我可以为您提供更多帮助。