Переиспользование счетчика

Question

Переиспользование счетчика

Рейтинг: 0Ответов: 1Опубликовано: 12.05.2023

Всем привет! Возникла такая проблема, я создал счетчик при помощи input, стилизовал и добавил js, добавил его нужным элементом, но при изменение значений в одном счетчике, меняется везде. Как мне переиспользование счетчик, но при этом не создавать куча счетчиков в js. Ниже код счетчика

const myInput = document.querySelector(".counter__input");

function stepper(btn){
    let id = btn.getAttribute("id");
    let min = myInput.getAttribute("min");
    let max = myInput.getAttribute("max");
    let step = myInput.getAttribute("step");
    let val = myInput.getAttribute("value");
    let calcStep = (id == "counter-increment") ? (step*1) : (step * -1);
    let newValue = parseInt(val) + calcStep;

    if(newValue >= min && newValue <= max){
        myInput.setAttribute("value", newValue);
    }
}

.counter {
  &__wrapper {
      display: flex;
      align-items: center;
      padding: 9px 16px;
      background: #E8E8E8;
      border-radius: 15px;;
      max-width: 125px;
  }

  input[type="number"]{
      -moz-appearance: textfield;
      text-align: center;
      font-size: 18px;
      color: #000;
      max-width: 25px;
      margin: 0 10px;
      background: #E8E8E8;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button{
      -webkit-appearance: none;
      margin: 0;
  }

  &__btn--plus {
      padding-right: 10px;
      border-right: 1px solid #A8A8A8;
      height: 32px
  }

  &__btn--minus {
      padding-left: 10px;
      border-left: 1px solid #A8A8A8;
      height: 32px
  }
}

<div class="counter">
  <div class="counter__wrapper">
    <button class="counter__btn--plus"><img src="/images/cart/minus.svg" alt="minus"></button>
    <input type="number" min="0" max="100" step="1" value="1" class="counter__input" readonly>
    <button class="counter__btn--minus" id="counter-increment"><img src="/images/cart/plus.svg" alt="plus"></button>
  </div>
</div>

css javascript html counter

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

Answer 1

▲ 1

Если использовать стандартные методы для управлением полем данного типа, то не придётся писать лишние скрипты, а время можно будет посвятить стилизации:

.counter {
  margin: 1em;
  float: left;
}

.counter__wrapper {
  display: grid;
  grid-template: 1fr / repeat(3, 1fr);
  place-items: stretch;
  gap: 5px;
  height: 32px;
  max-width: 125px;
  padding: 9px;
  border-radius: 15px;
  background: #e8e8e8;
  box-shadow: 0 0 3px 0 #e8e8e8, inset 0 -1px 4px 0 #fff8, inset 0 1px 3px -2px #0008;
}

.counter input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  max-width: 4ch;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
  color: #000;
  background: #eee;
  box-shadow: 0 0 4px -1px #0004, inset 0 -1px 4px -1px #fff, inset 0 1px 2px 0px #000;
}

.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.counter button {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0 0.35em 2px;
  border: none;
  font: bold 28px/1em monospace;
  text-shadow: 0 -1px 1px #000, 1px 1px 0 #fff;
  box-shadow: 0 0 2px 1px #0004, inset 0 3px 4px -1px #fff, inset 0 -1px 2px 1px #000;
  transition: 0.15s ease;
}

.counter button:not(:hover) {
  color: #e8e8e8;
}

.counter button:active {
  padding: 2px 0.35em 0;
  box-shadow: 0 0 2px 1px #0004, inset 0 -1px 4px -1px #fff, inset 0 1px 1px 1px #000;
}

.counter__btn--minus {
  border-radius: 9px 4px 4px 9px;
  color: #f44336;
}

.counter__btn--plus {
  border-radius: 4px 9px 9px 4px;
  color: #4caf50;
}

<div class="counter">
  <div class="counter__wrapper">
    <button class="counter__btn--minus">&minus;</button>
    <input type="number" min="0" max="100" step="1" value="100" class="counter__input" readonly>
    <button class="counter__btn--plus">&plus;</button>
  </div>
</div>
<div class="counter">
  <div class="counter__wrapper">
    <button class="counter__btn--minus">&minus;</button>
    <input type="number" min="0" max="100" step="1" value="100" class="counter__input" readonly>
    <button class="counter__btn--plus">&plus;</button>
  </div>
</div>
<div class="counter">
  <div class="counter__wrapper">
    <button class="counter__btn--minus">&minus;</button>
    <input type="number" min="0" max="100" step="0.1" value="99.9" class="counter__input" readonly>
    <button class="counter__btn--plus">&plus;</button>
  </div>
</div>

Переиспользование счетчика

Ответы