Элементы ввода JavaScript

Question

У меня проблема с моим скриптом, который отвечает за изменение текста внутри кнопок.

Похоже, что скрипт находит первый элемент с "id = add-to-cart", а затем меняет его значение. Есть ли способ заставить его найти соответствующий элемент ввода?

Вот код ниже

<form id="add-item-{{ product.variants.first.id }}" method="post" action="/cart/add" >
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />


{% unless product.available %}
        <span><input type="submit" name="add" id="add-to-cart" value="{{ settings.tr_sold_out }}" class="cart disabled" disabled="disabled" /></span>
      {% else %}
        <span><input type="submit" name="add" id="add-to-cart" value="{{ settings.tr_add_to_cart }}" class="cart" /></span>
      {% endunless %}

Кроме того, вот несколько изображений, предлагающих более наглядное объяснение.

1-е изображение

"Добавить в корзину" работает для каждого товара (добавляет в корзину)

2-е изображение

Когда кнопка "Добавить в корзину" выбрана для другого элемента (скажем, под первым элементом, показанным на изображении), продукт будет добавлен в корзину, но только верхняя кнопка отобразит состояние "Добавлен" или "Продан".

Кроме того, просто упомянуть, что мой магазин основан на платформе Shopify, поэтому есть некоторые особенности отображаемого кода, связанные с темой.

Если я плохо описал, чего я пытаюсь достичь, пожалуйста, дайте мне знать, и я постараюсь объяснить лучше.

Спасибо!

Answer 1

HTML идентификаторы должны быть уникальными в документе.

https://developer.mozilla.org/en-US/docs/Web/API/Element/id

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

В общем, избегайте использования идентификаторов, но если вам нужно, найдите способ сделать их уникальными.