添加 JS function 到 onClick 事件

Question

I am currently trying to make three buttons that will call the same function, but will result with three different outcomes. This is what I have so far:

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;
    }
  }

Now, before I even continue working with the code, I wanted to see if I could get the click event on the error button to just register a console.log(). But, unfortunately, I'm getting the following error:

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

I know that I'm missing something.

Answer 1

A seperate issue I see is that the JavaScript thinks that you are talking about variables when you type load , warning and error . Rather use double quotes around each one to define the text as a string:

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

In the mean time, check that your script file is correctly linked.