Adding JS function to onClick event

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.