为onClick事件绑定JS函数时出现progressStatus未定义报错如何解决

核心报错原因 #

你遇到的progressStatus is not defined报错，本质是你的JS代码存在多处语法错误，导致函数初始化失败，浏览器无法识别该函数，同时存在其他多类逻辑问题：

• HTML的onclick属性中传入的load、warning、error未加引号，被解析为未定义变量，触发额外报错
• JS内部判断逻辑中，所有字符串值（状态值、颜色值）均未加引号，属于未定义变量
• 语法错误：console.log() = status赋值逻辑完全错误，应为console.log(status)
• 属性拼写错误：样式属性backgroundcolor应为驼峰式backgroundColor，DOM属性innerHtml应为innerHTML
• 逻辑缺失：只有load分支写了DOM样式修改代码，error、warning分支修改变量后未执行赋值，视图不会更新
• width未加单位，直接赋值100不会生效，需要补充%等长度单位
• 若JS代码放在<head>标签内或DOM元素之前，会出现函数注册时DOM还未加载的问题，也可能触发未定义报错。

修正后的完整代码 #

将JS代码放在</body>标签之前，同时修正所有语法问题即可正常运行，我额外补充了进度条基础样式方便你直接看到效果，不需要可以自行删除：

<div class="button-wrapper">
  <button class="btn btn-success" onClick="progressStatus('load')">Loading</button>
  <button class="btn btn-warning" onClick="progressStatus('warning')">Slow Connection</button>
  <button class="btn btn-danger" onClick="progressStatus('error')">Error Message</button>
</div>
<div class="progress-margin">
  <h2 id="progress-h2">Your Progress</h2>
  <div id="progress-bar" style="width: 300px;height: 30px;border: 1px solid #ccc;">
    <div id="myBar" style="height: 100%;line-height: 30px;color: #fff;text-align: center;"></div>
  </div>
</div>

<script>
function progressStatus(status) {
    let elem = document.getElementById("myBar")
    let width = '';
    let bgColor = '';
    let innerText = '';
    // 打印状态确认点击触发
    console.log(status);

    if (status == 'error') {
      width = '100%';
      bgColor = 'red';
      innerText = "Something is wrong! Error";
    }
    
    if (status == 'warning') {
      width = '100%';
      bgColor = '#f0ad4e';
      innerText = "Slow Connection";
    }

    if (status == 'load') {
      // 后续可自行补充frame动画逻辑实现加载动效
      width = '10%';
      bgColor = '#5cb85c';
      innerText = "Loading...";
    }

    // 统一执行DOM更新
    elem.style.width = width;
    elem.style.backgroundColor = bgColor;
    elem.innerHTML = innerText;
}
</script>

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