How to use query for more than one element?-CodePudding

I'm trying to use querySelectorAll for more than one element but it does nothing. JavaScript code:

const major =document.querySelectorAll('#majors');
function alertBtn(){
    for(i=0;i<major.length;i  ){
        alert('Sorry, we are still working on it.');
    }
}
major.addEventListener('click', alertBtn);

html code:

<ul >
            <li id="majors"><a href="#">AE</a></li>
            <li id="majors"><a href="#">EE</a></li>
            <li id="majors"><a href="#">ME</a></li>
            <li id="majors"><a href="#">CHE</a></li>
            <li id="majors"><a href="#">CE</a></li>
            <li id="majors"><a href="#">CS</a></li>
            <li id="majors"><a href="#">SWE</a></li>
            <li id="majors"><a href="#">COE</a></li>
            <li id="majors"><a href="#">PETE</a></li>
            <li id="majors"><a href="#">ARE</a></li>
            <li id="majors"><a href="#">FIN</a></li>
            <li id="majors"><a href="#">ISE</a></li>
        </ul>

CodePudding user response：

You should use class instead of id because IDs should be unique. In this approach we fetch all the elements with class majors and then attach an click handler for each of them

const majors = [...document.querySelectorAll(".majors")];

function alertBtn() {
    alert("Sorry, we are still working on it.");
}

majors.forEach((major) => major.addEventListener("click", alertBtn));

<ul >
    <li ><a href="#">AE</a></li>
    <li ><a href="#">EE</a></li>
    <li ><a href="#">ME</a></li>
    <li ><a href="#">CHE</a></li>
    <li ><a href="#">CE</a></li>
    <li ><a href="#">CS</a></li>
    <li ><a href="#">SWE</a></li>
    <li ><a href="#">COE</a></li>
    <li ><a href="#">PETE</a></li>
    <li ><a href="#">ARE</a></li>
    <li ><a href="#">FIN</a></li>
    <li ><a href="#">ISE</a></li>
</ul>

CodePudding user response：

The issue with your code is that you're trying to add an event listener to the major variable, which is a NodeList (i.e. a list of nodes) returned by querySelectorAll(). However, you need to add the event listener to each individual element in the NodeList, rather than the NodeList itself.

One way to do this is to use a for loop to iterate over the NodeList, and add the event listener to each element. Here's an example of how you might do that:

const majors = document.querySelectorAll('.majors');
function alertBtn(){
    alert('Sorry, we are still working on it.');
}
Array.from(majors).forEach(major => major.addEventListener('click', alertBtn));

<ul >
    <li ><a href="#">AE</a></li>
    <li ><a href="#">EE</a></li>
    <li ><a href="#">ME</a></li>
    <li ><a href="#">CHE</a></li>
    <li ><a href="#">CE</a></li>
    <li ><a href="#">CS</a></li>
    <li ><a href="#">SWE</a></li>
    <li ><a href="#">COE</a></li>
    <li ><a href="#">PETE</a></li>
    <li ><a href="#">ARE</a></li>
    <li ><a href="#">FIN</a></li>
    <li ><a href="#">ISE</a></li>
</ul>

Another solution to this problem is to give each li unique ids, so that you can use the unique id to target each li individually.

const majorAE = document.querySelector('#major-ae');
const majorEE = document.querySelector('#major-ee');
.
.
.
const majorISE = document.querySelector('#major-ise');

majorAE.addEventListener('click', alertBtn);
majorEE.addEventListener('click', alertBtn);
.
.
.
majorISE.addEventListener('click', alertBtn);

<ul >
            <li id="major-ae"><a href="#">AE</a></li>
            <li id="major-ee"><a href="#">EE</a></li>
            <li id="major-me"><a href="#">ME</a></li>
            <li id="major-che"><a href="#">CHE</a></li>
            <li id="major-ce"><a href="#">CE</a></li>
            <li id="major-cs"><a href="#">CS</a></li>
            <li id="major-swe"><a href="#">SWE</a></li>
            <li id="major-coe"><a href="#">COE</a></li>
            <li id="major-pete"><a href="#">PETE</a></li>
            <li id="major-are"><a href="#">ARE</a></li>
            <li id="major-fin"><a href="#">FIN</a></li>
            <li id="major-ise"><a href="#">ISE</a></li>
</ul>