I am trying to select six elements with the class name .hours but using document.querySelectorAll() isn’t working and if I use document.querySelector() it returns only the first class with the name .hours, using document.getElementsByClassName() isn’t working either. Please help 🙂
const hoursTime = document.getElementsByClassName('hours');
const lastTime = document.querySelectorAll('.last-time');
hoursTime.onclick = function() {
hoursTime.innerHTML = "Clicked";
}<div class="report_container">
<div class="work_container">
<div class="work">
<div class="work_head">
<h3>Work</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="work_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
<div class="play_container">
<div class="play">
<div class="play_head">
<h3>Play</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="play_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
<div class="study_container">
<div class="study">
<div class="study_head">
<h3>Study</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="study_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
<div class="exercise_container">
<div class="exercise">
<div class="exercise_head">
<h3>Exercise</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="exercise_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
<div class="social_container">
<div class="social">
<div class="social_head">
<h3>Social</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="social_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
<div class="self_care_container">
<div class="self_care">
<div class="self_care_head">
<h3>Self Care</h3>
<img src="/images/icon-ellipsis.svg" class="elips" alt="">
</div>
<div class="self_care_content">
<h1 class="hours">0hrs</h1>
<p class="last-time">Select TIme Tracking</p>
</div>
</div>
</div>
</div>Why is it not working?
>Solution :
Actually querySelectorAll selects correctly elements and returns a NodeList (array of elements)
If you want to add an event to an array of elements you have to use a loop. You can use forEach for example
function fn() {
this.innerHTML = 'clicked'
}
document.querySelectorAll('.hours').forEach(e => e.addEventListener('click', fn))