Блог

Главная - Вопросы по программированию - Получение неперехваченной ссылочной ошибки Ударная установка не определена

Получение неперехваченной ссылочной ошибки Ударная установка не определена

#javascript #html #web #reference

#javascript #HTML #веб #ссылка

Вопрос:

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

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Beatmaker</title>
  </head>
  <body>
    <div class="sequencer">
      <div class="kick-track">
        <div class="controls">
          <h1>Kick</h1>
          <button data-track="0" class="mute kick-volume">
            <i class="fas fa-volume-mute"></i>
          </button>
          <select name="kick-select" id="kick-select">
            <option value="./allSounds/kick-classic.wav">Classic Kick</option>
            <option value="./allSounds/kick-808.wav">808 Kick</option>
            <option value="./allSounds/kick-heavy.wav">Kick Heavy</option>
          </select>
        </div>
        <div class="kick">
          <div class="pad kick-pad b0"></div>
          <div class="pad kick-pad b1"></div>
          <div class="pad kick-pad b2"></div>
          <div class="pad kick-pad b3"></div>
          <div class="pad kick-pad b4"></div>
          <div class="pad kick-pad b5"></div>
          <div class="pad kick-pad b6"></div>
          <div class="pad kick-pad b7"></div>
        </div>
      </div>
      <div class="snare-track">
        <div class="controls">
          <h1>Snare</h1>
          <button data-track="1" class="mute snare-volume">
            <i class="fas fa-volume-mute"></i>
          </button>
          <select name="snare-select" id="snare-select">
            <option value="./allSounds/snare-acoustic01.wav">
              Classic Snare
            </option>
            <option value="./allSounds/snare-808.wav">808 Snare</option>
            <option value="./allSounds/snare-vinyl02.wav">Snare Vinyl</option>
          </select>
        </div>
        <div class="snare">
          <div class="pad snare-pad b0"></div>
          <div class="pad snare-pad b1"></div>
          <div class="pad snare-pad b2"></div>
          <div class="pad snare-pad b3"></div>
          <div class="pad snare-pad b4"></div>
          <div class="pad snare-pad b5"></div>
          <div class="pad snare-pad b6"></div>
          <div class="pad snare-pad b7"></div>
        </div>
      </div>
      <div class="hihat-track">
        <div class="controls">
          <h1>Hihat</h1>
          <button data-track="2" class="mute hihat-volume">
            <i class="fas fa-volume-mute"></i>
          </button>
          <select name="hihat-select" id="hihat-select">
            <option value="./allSounds/hihat-acoustic01.wav">
              Hihat Acoustic
            </option>
            <option value="./allSounds/hihat-808.wav">808 Hihat</option>
          </select>
        </div>
        <div class="hihat">
          <div class="pad hihat-pad b0"></div>
          <div class="pad hihat-pad b1"></div>
          <div class="pad hihat-pad b2"></div>
          <div class="pad hihat-pad b3"></div>
          <div class="pad hihat-pad b4"></div>
          <div class="pad hihat-pad b5"></div>
          <div class="pad hihat-pad b6"></div>
          <div class="pad hihat-pad b7"></div>
        </div>
      </div>
      <button class="play">Play</button>
    </div>

    <audio class="kick-sound" src="./allSounds/kick-classic.wav"></audio>
    <audio class="snare-sound" src="./allSounds/snare-acoustic01.wav"></audio>
    <audio class="hihat-sound" src="./allSounds/hihat-acoustic01.wav"></audio>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
      integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8 gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ=="
      crossorigin="anonymous"
    ></script>
    <script src="./app.js"></script>
  </body>
</html>

class Drumkit {
      constructor() {
        this.pads = document.querySelectorAll(".pad");
        this.play = document.querySelector(".play");
        this.kickAudio = document.querySelector(".kick-sound");
        this.snareAudio = document.querySelector(".snare-sound");
        this.hihatAudio = document.querySelector(".hihat-sound");
        this.index = 0;
        this.bpm = 150;
      }
      activePad() {
        this.classList.toggle("active");
      }
      repeat() {
        let step = this.index % 8;
        const activeBars = document.querySelectorAll(`.b${step}`);
    
        this.index  ;
      }
      start() {
        const interval = (60 / this.bpm) * 1000;
        setInterval(() => {
          this.repeat();
        }, 1000);
      }
    }
    
    const drumkit = new Drumkit();
    
    drumKit.pads.forEach((pad) => {
      pad.addEventListener("click", drumKit.activePad);
    });
    
    drumKit.playBtn.addEventListener("click", function () {
      drumkit.start();
    });

Когда я проверяю и захожу в консоль, я получаю следующую ошибку

app.js: 30 Неперехваченная ошибка ссылки: ударная установка не определена в app.js:30 DevTools не удалось загрузить исходную карту: не удалось загрузить содержимое для chrome-расширение://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: Ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME DevTools не удалось нагрузкаИсходная карта: не удалось загрузить содержимое для chrome-расширение://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: Ошибка HTTP: код состояния 404, net::ERR_UNKNOWN_URL_SCHEME

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

1. Ударная установка ! = ударная установка

2. Ударная установка ! = ударная установка != Ударная установка

3. Вам нужно узнать о том, как работают имена переменных…