Кнопка количества не увеличивает и не уменьшает количество элементов в цикле "for"

Question

Я пытаюсь увеличить / уменьшить количество элемента с помощью ввода, полученного с HTML страницы. Когда я пытаюсь нажать кнопку inc / de c, он просто увеличивает / уменьшает мой первый элемент в пределах for l oop. Например: если у меня ввод 1-го элемента как 1 ... теперь я пытаюсь увеличить второй элемент с помощью кнопки c, он изменяет ввод 1-го элемента с 1 на 2, делая количество 1-го элемента равным 2, а мое вторые элементы остаются без изменений, как 1. То же самое продолжается, если я нажимаю на 3-й или 4-й элемент

Вот часть кода с моей html страницы

Answer 1

В конечном итоге идентификаторы ваших элементов должны быть уникальными. Особенно при выполнении вызовов getElementById() в JavaScript.

Вам необходимо изменить как серверные foreach l oop, так и клиентские increaseValue() / decreaseValue() функции.

Вам необходимо изменить их следующим образом: назначьте уникальный идентификатор в вашем foreach l oop, передайте идентификатор в качестве аргумента функциям increaseValue() / decreaseValue(), а затем обновите эти функции для использования аргумент принят. Обратите внимание, что ниже нам нужен индекс, который я называю {i}, который используется, чтобы сделать ваш id уникальным. Это необходимо увеличивать на каждой итерации foreach l oop.

Итак, в вашем foreach (особая благодарность за обновления кода @Sanjay) ...

{% for item in order.get_cart_items %}
    ...
        <div class="value-button" id="decrease" onclick="decreaseValue({forloop.counter})" value="Decrease Value">-</div>
        <input type="number" id="{forloop.counter}" value="1" />
        <div class="value-button" id="increase" onclick="increaseValue({forloop.counter})" value="Increase Value">+</div>
    ...
{% endfor %}

Визуализированный HTML должен выглядеть так: <input ... id="number1" ... />, <input ... id="number2" ... />, <input ... id="number3" ... />, et c .. Обратите внимание, свойства id уникальны.

И затем, в обоих ваши функции увеличения / уменьшения, настройте их следующим образом, чтобы принять аргумент для id, а затем использовать этот id ...

function increaseValue(id) {
      var value = parseInt(document.getElementById(id).value, 10);
      value = isNaN(value) ? 1 : value;
      value++;
      document.getElementById(id).value = value;
}

Сделайте это изменение для обоих ваших функций. Изменения в основном одинаковы для обоих, поэтому я перечисляю только один.

Теперь ваш JavaScript будет работать с конкретным id, данным ему.