Как правильно пройтись по всем элементам на странице?

Question

[redesupar]

Подскажите как правильнее пройтись по всем элементам на странице? хочу чтобы к каждой карточке товара могла меняться кол-во товара и его ссылка?
Пытаюсь через document.querySelectorAll но тоже выходит ошибка

<script>
var addToCartLink = document.querySelector('.buy_button').getAttribute('href');
var inputElement = document.querySelector('.kolvo input');
var plusButton = document.querySelector('.kolvo .plus');
var minusButton = document.querySelector('.kolvo .minus');

// Функция для обновления ссылки при изменении значения input
function updateLink() {
  var inputValue = inputElement.value;
  var newLink = addToCartLink.replace(/q=\d+/, 'q=' + inputValue);
  document.querySelector('.buy_button').setAttribute('href', newLink);
}

// plus
plusButton.addEventListener('click', function() {
  inputElement.stepUp();
  updateLink();
});

// minus
minusButton.addEventListener('click', function() {
  inputElement.stepDown();
  updateLink();
});

// Обработчик события при изменении значения input
inputElement.addEventListener('change', function() {
  updateLink();
});
</script>
<div class="cart">
<a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>

<div class="kolvo">
<span class="minus">-</span>
<input type="number" value="1" min="1">
<span class="plus">+</span>
</div></div>

Answer 1

[Михаил Р.]

Пытаюсь через document.querySelectorAll но тоже выходит ошибка

Надо лучше пытаться:

<script>
// Получаем все карточки товаров
const cards = document.querySelectorAll('.cart');

cards.forEach((card) => {
  const addToCartLink = card.querySelector('.buy_button');
  const inputElement = card.querySelector('.kolvo input');
  const plusButton = card.querySelector('.kolvo .plus');
  const minusButton = card.querySelector('.kolvo .minus');

  // Функция для обновления ссылки при изменении значения input
  const updateLink = () => {
    const inputValue = inputElement.value;
    const newLink = addToCartLink.getAttribute('href').replace(/q=\d+/, 'q=' + inputValue);
    addToCartLink.setAttribute('href', newLink);
  };

  // plus
  plusButton.addEventListener('click', () => {
    inputElement.stepUp();
    updateLink();
  });

  // minus
  minusButton.addEventListener('click', () => {
    inputElement.stepDown();
    updateLink();
  });

  // Обработчик события при изменении значения input
  inputElement.addEventListener('input', () => {
    updateLink();
  });
});
</script>
<div class="cart">
<a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>

<div class="kolvo">
<span class="minus">-</span>
<input type="number" value="1" min="1">
<span class="plus">+</span>
</div></div>

Comments

[Егор Живагин]

const cards = [...document.querySelectorAll('.cart')];

querySelectorAll вернёт коллекцию, если ничего не путаю, у них нет метода forEach

[Михаил Р.]

Егор Живагин,

querySelectorAll вернёт коллекцию, если ничего не путаю, у них нет метода forEach

Раз Вы заюзали spread (ES6), то querySelectorAll возвращает не простую коллекцию, а NodeList. С версии ECMAScript 2015 (ES6) и выше, NodeList включает в себя метод forEach.

Если нужна поддержка старья, то тогда уж:

const cards = Array.from(document.querySelectorAll('.cart'));

[Егор Живагин]

Михаил Р., вы правы, давно не работал с dom напрямую, забыл что forEach есть