AddEventListener "Click" Is Not Responding in Ejs File
Header. Ejs Footer. Ejs Delicacies. Ejs Cart. Js I Am Trying to Make the Element("Span. Cartcount") Display as It Is Set to Display: None in the Css File. It...
header.ejs
footer.ejs
delicacies.ejs
cart.js
I am trying to make the element("span.cartcount") display as it is set to display: none in the CSS file. It should be displayed when I click on addtocart button (a.addtocartbutton).
I will also be glad if I can get directions or an alternative way of going about shopping cart system with express.js
Thank you.
1 Answer
document.querySelector() returns just the first element matching the selector. You have a foreach() loop that creates multiple items, you need to add the event listener to all of them. So you need to use document.querySelectorAll() and loop over them.
let addToCartButtons = document.querySelectorAll("a.addtocartbutton");
let cartCount = document.querySelector("span.cartcount");
addToCartButtons.forEach(btn => btn.addEventListener("click", (event) => {
event.preventDefault();
cartCount.style.display = "inline";
}));
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
