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

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 >
                <a href="./plushie.html" >Plushies!</a>
                <a href="./about.html" >About Space Pups</button>
                <a  href="Hidden for privacy"> TikTok </a>
            </div>
        </center>    
        <h1> Space Pups</h1>
        <h2>Stickers</h2>
        <center>
        <div >

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

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

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

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

CodePudding user response：

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`)))