Как перезаписать событие на клике JS

Рейтинг: 0Ответов: 1Опубликовано: 05.08.2023

Подскажите, пожалуйста, как перезаписать событие для drumsBtns если чекбокс switchDrums отключен?

Сейчас при попытке перезаписать событие у кнопки, у меня просто добавляется событие к уже ранее добавленному.

import { sounds } from './drumsSounds.js';

const switchDrumsText = document.querySelector('.drums__on-btn');
const switchDrums = document.getElementById('switchDrums');
const drumsBtns = document.querySelectorAll('.drums__btn');

function playMusic(src) {
  let music = new Audio(src);
  music.play();
};

const enableDrums = () => {
  drumsBtns.forEach((el) => {
    el.addEventListener('click', () => {
      let sound = sounds.find(sound => sound.id === el.id);
      setInterval(() => playMusic(sound.src), 1000);
    });
  });
};

const disableDrums = () => {
  drumsBtns.forEach((el) => {
    el.addEventListener('click', () => {
      console.log('disabled');
      return;
    });
  });
};

switchDrums.addEventListener('click', () => {
  if (switchDrums.checked) {
    switchDrumsText.innerHTML = 'ON';
    enableDrums();
  };

  if (!switchDrums.checked) {
    switchDrumsText.innerHTML = 'OFF';
    disableDrums();
  };
});

Ответы

▲ 0Принят

Разобрался, добавил в слушатель события проверку на switchDrums.checked

Получилось таким образом:

import { sounds } from './drumsSounds.js';

const switchDrumsText = document.querySelector('.drums__on-btn');
const switchDrums = document.getElementById('switchDrums');
const drumsBtns = document.querySelectorAll('.drums__btn');

function playMusic(src) {
  let music = new Audio(src);
  music.play();
};

const enableDrums = () => {
  drumsBtns.forEach((el) => {
    el.addEventListener('click', () => {
      if(switchDrums.checked) {
        let sound = sounds.find(sound => sound.id === el.id);
        sound.isActive = true;
        setInterval(() => playMusic(sound.src), 1000);
      } else {
        return;
      };
    });
  });
};

switchDrums.addEventListener('click', () => {
  if (switchDrums.checked) {
    switchDrumsText.innerHTML = 'ON';
    enableDrums();
  };

  if (!switchDrums.checked) {
    switchDrumsText.innerHTML = 'OFF';
  };
});