How would I select a group of buttons using classes and if any of them are pressed, a alert pops up

I tried using .addEventListener with querySelector, but for some reason it wouldn’t work.

const b = document.querySelector(".buybttn");
b.addEventListener("click",() => {
    console.log("button was clicked");
})

The error is Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') I don’t understand why the error is happening either.

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        
        <noscript><p>You need to enable javascript to fully use this website.</p></noscript>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Space Pups Fan Website!</title>
    </head>
    <body>
        
            <center>
            <div class="navbar">
                <a href="./plushie.html" class="buttonA">Plushies!</a>
                <a href="./about.html" class="buttonA">About Space Pups</button>
                <a class="buttonA" href="Hidden for privacy"> TikTok </a>
            </div>
        </center>    
        <h1> Space Pups</h1>
        <h2>Stickers</h2>
        <center>
        <div class="products">

         <div class="product">
        <center>
            <img src="./Images/sticker1.png"> 
            <h3>Gold Sticker!</h3>
            <h4>2.99$</h4>
            <button class="buybttn">Buy!</button>
        </center>
         </div>         
            <div class="product">
            <center>
                <img src="./Images/sticker2.png"> 
                <h3>Moth Alien Sticker!</h3>
                <h4>2.99$</h4>
                <button class="buybttn">Buy!</button>
            </center>
            </div>  
                <div class="product">
                <center>
                    <img class="SpecialRose"src="./Images/sticker3.png"> 
                    <h3>Rose Pup sticker!</h3>
                    <h4>2.99$</h4>
                    <button class="buybttn">Buy!</button>
                </center>
                 </div>
               
                </div>
                <br>
              
        <div class="products">
                 <div class="product">
                <center>
                    <img class="SpecialBoss"src="./Images/sticker4.png"> 
                    <h3>Alien Boss Sticker!</h3>
                    <h4>2.99$</h4>
                    <button class="buybttn">Buy!</button>
                </center>
                 </div>     
                 <div class="product">
                    <center>

                    <img class="SpecialDia" src="./Images/sticker5.png"> 
                    <h3>Sleepy Dia Sticker!</h3>
                    <h4>2.99$</h4>
                    <button class="buybttn">Buy!</button>
                    </center>
                 </div>           
                 <div class="product">
                <center>
                    <img class="SpecialDia" src="./Images/sticker6.png"> 
                    <h3>Ghost Pup Sticker!</h3>
                    <h4>2.99$</h4>
                    <button class="buybttn">Buy!</button>
                </center>
                 </div>      

    </div>
   
        </center>
  
        </body>
        <script src="./script.js">
        </script>
</html>

Anyone have some knowledge they can share? …………………………………………………………. …………………………………………………………………………………………………………………….. Thanks, Leo.

Answer

Just get all the buttons with document.querySelectorAll and add an event in each one of them with the forEach method and addEventListener. You can access the value of a button with event.target.value.

Try the following .js code:

document.querySelectorAll(".buybttn").forEach(element => element.addEventListener('click', event => alert(`Button ${event.target.value} was clicked`)))

Advertisement

Answer