Где хранятся скрытые значения у HTML элемента?

В Элементе input:

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

никакой цены нету, но при нажатии на (+) / (-) цена меняется. Вопрос: откуда берется цена выбранного элемента?

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


Ответы (1 шт):

Автор решения: Great Tech

Возможно, вы решили, что раз кнопка увеличивает какой-то счётчик, то она непременно должна хранить информацию о том, насколько счётчик должен увеличиться.

Позвольте опровергнуть это:

increment = [50, 70, 20];
values = [90, 40, 30];

// заполнить все элементы начальными значениями

document.querySelectorAll("counter").forEach(function(counter, index){
  counter.innerHTML = values[index];
})

// добавить onclick всем элементам
document.querySelectorAll('btn').forEach(function(btn, index) {
   btn.onclick = function() {
    values[index] += increment[index];
    document.querySelectorAll("counter")[index].innerHTML = values[index];
  }
})
btn {
  display: inline-block;
  border: 1px solid black;
  padding: 2px 6px 2px 6px;
  border-radius: 100%;
  margin-left: 10px;
  cursor: pointer;
}
<div>яблоки
  <counter>0</counter>
  <btn>+</btn>
</div>
<div>бананы
  <counter>0</counter>
  <btn>+</btn>
</div>
<div>персики
  <counter>0</counter>
  <btn>+</btn>
</div>

Вернёмся к вопросу. Ответ - может храниться где угодно в виде переменной в JavaScript или параметре любого другого тэга HTML.

→ Ссылка