如何在javascript nodelist中的每个元素中添加函数

Question

so here's an example of the working code

const test = document.getElementById('test')
const time = 1000
var timer;

test.addEventListener('touchstart', hlt)
test.addEventListener('touchend', endt)


function onlongtouch(){
    console.log('it has been 600 milisecond')
}

function hlt(){
  console.log('test');
  timer = setTimeout(onlongtouch, time)
  console.log(timer)

}

function endt(){
    if(timer){
        clearTimeout(timer)
    }
}

And the HTML

 <div class="data" id="test">
            <div class="num"><p>1</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>2</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>3</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>

so i was taking a single element with an id of "test" and add the touch functionality to it, but what if i replace const test = document.getElementById('test') with document.querySelectorAll('data') im grabbing the same element but instead of a single element it's a whole nodelist full of element. How do i add functionality to all of them?

Thank you in advance!

Answer 1

let elements = [...document.querySelectorAll('.data')];
for(let el of elements) {
  el.addEventListener('touchstart', hlt)
  el.addEventListener('touchend', endt)
}