How sellect all elements by querySelectorAll()

Question

I have a website with product catalog https://www.estelab.ru/cosmetics/zo-medical/

After click to the button "buy" in orange background you can see in console message ("addToCart works")

But this click works with first button.

var CartButton = document.querySelector(".eshop_js-add-to-cart");
CartButton.onclick = (function() {
  console.log("addToCart works");

});

document.querySelectorAll(".eshop_js-add-to-cart") dont help me in this question — Sadi Zeynalov, Aug 27 '21 at 14:23
Welcome to SO! I recommend all new users visit [ask] for tips on forming questions in a manner that best enables the community to provide helpful assistance. For what it is worth, I am hesitant to click away to an unknown site for context on a question. Furthermore, if critical information for understanding the problem is on that site and the site gets fixed/updated, this post becomes useless for subsequent visitors. I'd recommend putting a [mcve] as a snippet _in the body of the question_, and include the reproduction steps and expected/actual behavior. Good luck and happy coding! — Alexander Nied, Aug 27 '21 at 14:26

score 1 · Accepted Answer · answered Aug 27 '21 at 14:28

1

You should use forEach

var CartButton = document.querySelectorAll(".eshop_js-add-to-cart");

CartButton.forEach((item) => {
  item.onclick = function () {
    console.log("addToCart works");
  };
});

<div class="eshop_js-add-to-cart">Click me!</div>
<div class="eshop_js-add-to-cart">Click me!</div>
<div class="eshop_js-add-to-cart">Click me!</div>
<div class="eshop_js-add-to-cart">Click me!</div>

answered Aug 27 '21 at 14:28

Emma Teylor

95
9

nice. Thank you – Sadi Zeynalov Aug 27 '21 at 14:31
@SadiZeynalov - if this user's answer was helpful, don't forget to upvote it and mark it as your selected answer (if applicable). – Alexander Nied Aug 27 '21 at 14:33
You are welcome, Please mark it as solved. @Sadi Zeynalov – Emma Teylor Aug 27 '21 at 14:35
@emma-teylor how to mark as solved? – Sadi Zeynalov Aug 27 '21 at 14:37
Just click on "Tick" Icon @Sadi Zeynalov – Emma Teylor Aug 27 '21 at 14:39
Can you tell me if i can another document.querySelectorAll into forEach how i can get all the data too – Sadi Zeynalov Aug 27 '21 at 14:39
When you using document.querySelectorAll it's return list of that element and with forEach you can move on that list @Sadi Zeynalov – Emma Teylor Aug 27 '21 at 14:42
can i use document.querySelectorAll into document.querySelectorAll? – Sadi Zeynalov Aug 27 '21 at 14:59
what do you mean? – Emma Teylor Aug 27 '21 at 15:17
@emma-teylor on this page (https://www.estelab.ru/cosmetics/zo-medical/) i have a product list. After running script (which do you answer) i need to get a next properties: var NameProductList = document.querySelectorAll(".eshop-item-v2-title").textContent; var ProductIdList = document.querySelectorAll('.eshop_js-add-to-cart'); var ProductIdCountList = ProductIdList.getAttribute('data-id'); – Sadi Zeynalov Aug 30 '21 at 06:57

How sellect all elements by querySelectorAll()

1 Answers1