Смена с button на checkbox

Question

Есть кнопки при нажатии на которые вкл или откл вибрация

<button id="vibro_on" class="btn_vibro">ON</button>
<button id="vibro_off" class="btn_vibro">OFF</button>

Нужно поменять с кнопок на переключатель

<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>

Вот js код

let doVibro = Boolean(localStorage.getItem('doVibro') === '0' ? 0 : 1) || false;

document.getElementById("vibro_on").addEventListener('click', () => {
  switchVibro(true)
});

document.getElementById("vibro_off").addEventListener('click', () => {
  switchVibro(false)
});

const list = document.getElementsByClassName('doVibro');

for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', (e) => {
      doVibro ? navigator.vibrate([50]) : navigator.vibrate([0]);
     })
}


function switchVibro(bool) {
  doVibro = Boolean(bool);
  localStorage.setItem('doVibro', bool ? '1' : '0')
}

Нужно сделать привязку на чекбокс вкл и откл вибрацию.

Answer 1

Если не получится самостоятельно, то ниже ответ.
Что бы получше разобраться с событиями элементов и ознакомиться с ними, почитайте HTMLElement

В вашем случае, все решается созданием слушателя на событие change вашего чекбокса.

<label class="switch">
<input type="checkbox" id="vibroSwitch"> <!-- Назначаем ID -->
<div class="slider"></div>
</label>

let doVibro = Boolean(localStorage.getItem('doVibro') === '0' ? 0 : 1) || false;

document.getElementById('vibroSwitch').addEventListener('change', (e) => { // Создаем слушателя
  switchVibro(e.currentTarget.checked); // Вызываем функцию и передаем свойство chacked нашего элемента
})

const list = document.getElementsByClassName('doVibro');

for (let i = 0; i < list.length; i++) {
  list[i].addEventListener('click', (e) => {
    doVibro ? navigator.vibrate([50]) : navigator.vibrate([0]);
  })
}

function switchVibro(bool) {
  doVibro = Boolean(bool);
  localStorage.setItem('doVibro', bool ? '1' : '0')
}

БЛОГ НА HUSL

Смена с button на checkbox

Ответы (1 шт):