Как решить Javascript карта l oop не работает каждый тег div?

Question

Когда-то я сталкивался с этой проблемой, почему не работает карта l oop, я так и не получил решения.

 let slide = document.querySelectorAll('.slide');

    //not working below
    slide.map((s)=>  s.onmousedown = slideFunction);

    function slideFunction(){
        alert('HI')
    }

    // working below
    let num = [3,2,5,2];
    num.map((n)=> alert(num));

карта l oop не работает каждый слайд, но работает массив значений num.

Answer 1

Пара проблем:

• Не следует использовать map() для этого, но forEach().
• Функция document.querySelectorAll() возвращает NodeList, а не массив. Вам необходимо преобразовать его в массив для вызова функций массива, таких как map().
  Однако , NodeList предоставляет функцию forEach(), так что вы можете вызовите это непосредственно в результате document.querySelectorAll().

let slides = document.querySelectorAll('.slide');

slides.forEach((s) => s.onmousedown = slideFunction);

function slideFunction() {
  alert('Hi')
}

<div class="slide">Slide one</div>
<div class="slide">Slide two</div>

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

Answer 2

Это потому, что querySelectorAll возвращает NodeList , это массивоподобный объект (кажется, что массив, но это не так).

Вы должны преобразовать его в массив:

Array.from(slide).map((s)=>  s.onmousedown = slideFunction);