Блог

Главная - Вопросы по программированию - Добавление функции JS в событие onClick

Добавление функции JS в событие onClick

#javascript #function #onclick #htmlbutton

Вопрос:

Начинающий разработчик здесь. В настоящее время я пытаюсь создать три кнопки, которые будут вызывать одну и ту же функцию, но приведут к трем разным результатам. Это то, что у меня есть до сих пор:

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

Теперь, прежде чем я даже продолжу работать с кодом, я хотел посмотреть, смогу ли я получить событие click на кнопке ошибки, чтобы просто зарегистрировать console.log(). Но, к сожалению, я получаю следующую ошибку:

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

Я знаю, что мне чего-то не хватает, и я ищу сообщество, которое могло бы мне помочь. Спасибо.

Комментарии:

1. Я не вижу там ничего плохого в вашем коде. Я только что протестировал ваш код, и он отлично работает без каких-либо ошибок.

2. в чем заключается ценность load in progressStatus(load) ? и где это определено ?

3. Даже когда вы нажимаете на кнопку «Ошибка»? Это то, что я сейчас тестирую.

4. Вам нужно включить скрипт на html — страницу с помощью <src> тега?

5. @Полруни… Черт возьми, лишнее письмо… я напечатал scripts.js вместо script.js этого . Спасибо. Это устранило одну проблему, в то время как ответ @Matthias помог мне решить другую проблему. Перейдем к следующим вопросам. Спасибо всем, кто заглянул.

Ответ №1:

Отдельная проблема , которую я вижу, заключается в том, что JavaScript думает, что вы говорите о переменных при вводе load , warning и error . Вместо этого используйте двойные кавычки вокруг каждой из них, чтобы определить текст как строку:

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

В то же время убедитесь, что ваш файл сценария правильно связан.

Метки: