Замена getElementById на getElementsByClassName или querySelector

Question

Хочу заменить getElementById на возможность привязки нескольких div элементов на это событие. Что бы не по одному айди было. Как изменить код? К примеру <div class="doVibro">Hello</div>

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

document.getElementById("do-vibro").addEventListener('click', () => {
  doVibro ? navigator.vibrate([50]) : navigator.vibrate([0]);
});

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

Answer 1

На примере вашего <div class="doVibro">Hello</div>

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

for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', (e) => {
       console.log(e.target.innerHTML)
     })
}

<div class="doVibro">Hello 0</div>
<div class="doVibro">Hello 1</div>
<div class="doVibro">Hello 2</div>
<div class="doVibro">Hello 3</div>
<div class="doVibro">Hello 4</div>

БЛОГ НА HUSL

Замена getElementById на getElementsByClassName или querySelector

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