Issue
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.
Solution
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`)))
Answered By - Franco A. Torres Answer Checked By - Cary Denson (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.