Flask模板中JS弹窗正常但计数器失效问题求助

在Replit上托管Discord Bot时，Flask框架的templates/index.html中的JavaScript代码出现异常——弹窗“Bot Online”可正常触发，但页面上的秒数计数器无法开始运行。相关代码如下：

templates/index.html 部分代码 #

<script type="text/javascript">
var seconds = 0;
var el = document.getElementById('seconds-counter');

function incrementSeconds() {
    seconds += 1;
    el.innerText = "Online for " + seconds + " seconds.";
}

window.onload = function(){
alert("Bot Online");
setInterval(incrementSeconds, 1000);
}
</script>
<body>
<div id='seconds-counter'>0</div>
</body>

keep_alive.py 代码 #

from flask import Flask, render_template
from threading import Thread

app = Flask('')

@app.route('/')
def main():
    return render_template('index.html')

def run():
    app.run(host="0.0.0.0", port=8080)
    
def keep_alive():
    server = Thread(target=run)
    server.start()

问题原因分析 #

核心问题是脚本执行时机早于目标DOM元素加载：

• 你将<script>标签放在了<body>标签之前，当脚本执行var el = document.getElementById('seconds-counter');时，页面上的<div id='seconds-counter'>还未被浏览器解析渲染，导致el变量的值为null。
• 虽然window.onload事件会在页面完全加载后触发弹窗并启动计时器，但此时el已经是null，调用incrementSeconds函数时尝试修改el.innerText会触发未捕获的错误，直接导致计数器功能失效。

修复方案 #

有两种简单的解决方式：

方式1：将脚本移到末尾

确保DOM元素先加载完成，再执行脚本获取元素：

<body>
<div id='seconds-counter'>0</div>
<script type="text/javascript">
var seconds = 0;
var el = document.getElementById('seconds-counter');

function incrementSeconds() {
    seconds += 1;
    el.innerText = "Online for " + seconds + " seconds.";
}

window.onload = function(){
alert("Bot Online");
setInterval(incrementSeconds, 1000);
}
</script>
</body>

方式2：在window.onload内获取DOM元素

延迟获取元素的操作到页面完全加载后：

<script type="text/javascript">
var seconds = 0;
var el;

function incrementSeconds() {
    seconds += 1;
    el.innerText = "Online for " + seconds + " seconds.";
}

window.onload = function(){
alert("Bot Online");
el = document.getElementById('seconds-counter');
setInterval(incrementSeconds, 1000);
}
</script>
<body>
<div id='seconds-counter'>0</div>
</body>

内容的提问来源于stack exchange，提问作者benz