将 JS 函数添加到 onClick 事件

Question

我目前正在尝试制作三个按钮，它们将调用相同的函数，但会产生三种不同的结果。这是我目前所拥有的：

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>

JS



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)

我知道我错过了什么。

Answer 1

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

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

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

将 JS 函数添加到 onClick 事件

Adding JS function to onClick event

html

javascript

function

onclick