HTML5 Progress Bar无法运行：点击GO按钮进度条无响应

我看了你的代码片段，发现几个关键问题导致进度条没动起来，帮你梳理并修正如下：

核心问题分析 #

• 函数定义语法错误：function go(); {里的分号完全多余，会让浏览器无法正确识别go函数，点击按钮时自然找不到要执行的方法。
• 函数名拼写不完整：你用setInterval(updateProgress,50)调用了更新函数，但定义的函数写成了updat...，名字不匹配，定时器根本找不到要执行的逻辑。
• 缺少进度条操作逻辑：你的代码里没看到获取<progress>元素并更新其值的代码，这也是进度条毫无反应的重要原因。

修正后的完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>HTML5 Progress Bar</title>
    <script type="text/javascript">
        function go() { // 移除多余的分号
            var inc = 0;
            // 获取页面上的进度条元素
            var progressBar = document.getElementById('progressBar');
            var doIt = setInterval(updateProgress, 50);
            
            function updateProgress() { // 补全完整的函数名
                inc += 1;
                // 更新进度条的当前值
                progressBar.value = inc;
                // 进度到100时停止定时器
                if (inc >= 100) {
                    clearInterval(doIt);
                }
            }
        }
    </script>
</head>
<body>
    <!-- 增加进度条元素的id，方便JS获取 -->
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="go()">GO</button>
</body>
</html>

修正细节说明 #

1. 删掉go函数定义后的分号，确保函数能被按钮的onclick正确调用。
2. 补全updateProgress函数的完整拼写，让定时器能找到对应的执行逻辑。
3. 添加了获取进度条元素的代码，在每次定时器触发时更新进度条的value属性，同时增加了进度满100后清除定时器的逻辑，避免无限循环执行。

把这段代码放到IE和Chrome里测试，点击GO按钮后进度条应该就能正常从0走到100了。

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