Задать вопрос
@destys
javascript

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

Добрый день. Есть страница каталога с классом .product__list, в ней содержатся превью товаров(количество может быть любым) с классом .product__item. У .product__item есть цена .product__price и счетчик, который реализован через input.number у него класс .num__count, а так-же есть ссылка .product__link.

Задача состоит в том, что бы при нажатии на .product__link в консоль выводилась цена(.product__price) умноженная на value счетчика(.num__count).

С JS только начинаю разбираться, поэтому получился вот такой код. Но, он работает только для первого .product__item.
Буду очень благодарен за помощь.

<div class="product__item">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                <line class="top" x1="0" y1="0" x2="900" y2="0" />
                <line class="left" x1="0" y1="460" x2="0" y2="-920" />
                <line class="bottom" x1="300" y1="485" x2="-600" y2="485" />
                <line class="right" x1="278" y1="0" x2="278" y2="1380" />
            </svg>
            <div class="product__img">
                <div class="icon-hit">hit</div>
                <a href="#" class="icon-search"><img src="/assets/images/search.svg" alt="Поиск">Быстрая покупка</a>
                <a href="card.html"><img src="/assets/images/top-sales-img.jpg" alt="хит-продаж">Купить</a>
            </div>  
            <div class="product__center">
                <a href="card.html" class="product__title">Название товара</a>
                <div class="product__params">
                    <div class="ts__param-item">
                        <span>Артикул</span>
                        <span>12100023</span>
                    </div>
                    <div class="ts__param-item">
                        <span>Цвет</span>
                        <span>черный</span>
                    </div>
                    <div class="ts__param-item">
                        <span>Наличие</span>
                        <span>склад</span>
                    </div>
                </div>
            </div>  
            <div class="product__footer">
                <div class="count">
                    <button class="minus">-</button>
                    <input class="number" type="number" step="1" min="1" max="10" id="num_count" class="num__count" name="quantity" value="1"
                        title="Qty">
                    <button class="plus">+</button>
                </div>
                <div class="product__price"><span class="price">2324</span> &#8381;/шт</div>
                <button type="button" class="product__link"><img src="/assets/images/shopping-cart.svg" alt="Купить">Купить</button>
            </div>
        </div><!-- END product ITEM-->

const prodItem = document.querySelectorAll('.product__item');
let qbBtn;
let qbPrice;
let qbCount;

prodItem.forEach(function(){
    
    qbBtn = document.querySelector('.product__link')

    qbBtn.onclick = function() {
        qbPrice = document.querySelector('.product__price>span').innerHTML;
        qbCount = document.querySelector('.num_count').value;
        console.log(qbPrice);
        console.log(qbCount); 
        console.log(+qbPrice * +qbCount);
    }
});
  • Вопрос задан
  • 224 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@StiflerProger 
const prodLinks = document.querySelectorAll('.product__link');

prodLinks.forEach(function(element) {

  element.onclick = function(event) {
  	const target = event.target;
    const productItem  = event.target.parentElement.parentElement;
    const productPrice = Number(productItem.querySelector('.product__price > .price').innerText)
    const productAmount = Number(productItem.querySelector('.count > input').value)
    
    
    console.log(productPrice * productAmount);
  }
  
});


Судя по твоему описанию то так
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка страницы статьи на сайте на WordPress
03 мая 2024, в 13:03
1000 руб./в час
Написать бэк часть (API Эквайринг Тинькофф, VK API, API Cloudpayments)
28 апр. 2024, в 13:02
500000 руб./за проект
Парсер для обновления остатков товаров на МП Вайлдбериз
03 мая 2024, в 12:05
2000 руб./за проект
Ещё заказы