Помогите со счетчиком js

Рейтинг: -2Ответов: 1Опубликовано: 06.07.2023

let counter = 0;
updatePrice();

const counterValue = document.getElementById('counter-value');
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');

incrementBtn.addEventListener('click', () => {
  counter++;
  counterValue.innerHTML = counter;
  updatePrice();
});

decrementBtn.addEventListener('click', () => {
  if (counter > 0) {
    counter--;
    counterValue.innerHTML = counter;
    updatePrice();
  }
});

function updatePrice() {
  let priceStr = parseFloat(document.getElementById('price').textContent);
  let priceNum = Number(priceStr);
  newPrice = counter * priceNum;
  document.getElementById('price').innerHTML = newPrice;
}
<div class="age">
                <p class="age_text">1 год</p>
                <div class="container">
                    <div class="counter">
                        <button id="increment-btn">
                            +
                        </button>
                        <div id="counter-value">
                            0
                        </div>
                        <button id="decrement-btn">
                            -
                        </button>
                    </div>
                </div>
                <p class="price" id="price">300</p>
            </div>
            <div class="age">
                <p class="age_text">1 год</p>
                <div class="container">
                    <div class="counter">
                        <button id="increment-btn">
                            +
                        </button>
                        <div id="counter-value">
                            0
                        </div>
                        <button id="decrement-btn">
                            -
                        </button>
                    </div>
                </div>
                <p class="price" id="price">300</p>
            </div>

  1. Блок с классом age работает только один. То есть, если я под него добавлю такой же div, то счетчик перестает работать. Не кликабелен.
  2. Нужно в целом сделать следующее. Есть карточка, там должно быть два блока age (1 год и 2 года). Цены в "price" будут разные. Допустим 100 рублей и 200 рублей. Нужно, чтобы js брал значение "price" у каждой карточки (их будет много), затем умножал его на значение счетчика "counter_value", которое юзер может накликать сколько угодно, и выводил общую стоимость накликанного товара для каждого блока age отдельно, допустим: 1 год - 5 + 500 рублей 2 года - 2 + 400 рублей Ниже 0 счетчик опускаться не должен, но это вроде реализовано

введите сюда описание изображения

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

если я правильно понял вопрос

let counter = 0;

const counterValue = document.getElementById('counter-value');
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');

incrementBtn.addEventListener('click', () => {
  counter++;
  counterValue.innerHTML = counter;
  updatePrice();
});

decrementBtn.addEventListener('click', () => {
  if (counter > 0) {
    counter--;
    counterValue.innerHTML = counter;
    updatePrice();
  }
});

function updatePrice() {
  const price = document.querySelector('.price')
  const multiplier = +counterValue.innerText
  const ages = document.querySelectorAll('.age_text')

  price.innerHTML = ''

  ages.forEach(age => {
    price.innerHTML += `<p>${age.dataset.age} год -- ${+age.dataset.price * multiplier}</p>`
  })
}
<div class="age">
  <p class="age_text" data-age="1" data-price="100">1 год - 100р</p>
  <p class="age_text" data-age="2" data-price="200">2 года - 200р</p>
  <div class="container">
    <div class="counter">
      <button id="increment-btn"> + </button>
      <div id="counter-value"> 0 </div>
      <button id="decrement-btn"> - </button>
    </div>
  </div>
  <div class="price" id="price"></div>
</div>