将 JS 函数添加到 onClick 事件答案

【问题标题】：Adding JS function to onClick event将 JS 函数添加到 onClick 事件
【发布时间】：2021-10-26 02:29:03
【问题描述】：

这里是初学者。我目前正在尝试制作三个按钮来调用相同的功能，但会产生三种不同的结果。这是我目前所拥有的：

html

<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">
    <div id="myBar"></div>
  </div>
</div>



function progressStatus(status) {
    let elem = document.getElementById("myBar")
    let width = '';
    let bgColor = '';
    let innerText = '';
    // if error
    if (status==error) {
      width = 100;
      bgColor = red;
      innerText = "Something is wrong! Error";
    }
    
    // if slow
    if (status==warning) {
      width = 100;
      bgColor = yellow;
      innerText = "Slow Connection";
    }
    // if load
    if (status==load) {
      function frame() {
        
      }
      elem.style.width = width;
      elem.style.backgroundcolor = bgColor;
      elem.innerHtml = innerText;
      console.log() = status;
    }
  }

现在，在我继续使用代码之前，我想看看我是否可以在错误按钮上获得点击事件来注册一个 console.log()。但是，不幸的是，我收到以下错误：

ReferenceError: progressStatus is not defined
    at HTMLButtonElement.onclick (/:14:76)

我知道我错过了一些东西，我正在寻找一个社区来帮助我。谢谢。

【问题讨论】：

我没有看到您的代码有任何问题。我刚刚测试了您的代码，它运行良好，没有任何错误。
load 在progressStatus(load) 中的值是多少？它在哪里定义？
即使您点击了“错误”按钮？这就是我现在正在测试的。
是否需要使用<src>标签将脚本包含在html页面中？
@PaulRooney...天哪，额外的字母...我输入了scripts.js而不是script.js。谢谢你。这解决了一个问题，而@Matthias 的回答帮助我解决了另一个问题。进入下一个问题。感谢所有参与进来的人。

标签： javascript function onclick htmlbutton

【解决方案1】：

我看到的另一个问题是，当您键入 load、warning 和 error 时，JavaScript 认为您在谈论变量。而是使用双引号将每个文本定义为字符串：

if (status=="load") {
      function frame() {       
}

同时，检查您的脚本文件是否正确链接。

【讨论】：