Связанное с Javascript изменение текста кнопки ввода

Question

У меня есть название продукта (в пункте), текстовая форма и кнопка. Идентификаторы продуктов имеют следующие идентификаторы p1,p2... Типы ввода имеют идентификаторы следующим образом: i1, i2... После ввода чего-либо в форме и нажатия кнопки Отправить я хочу изменить текст продукта по умолчанию. У меня есть следующая функция, которая работает только для одного набора (параграф, форма и кнопка). Проблема в том, что эта функция продукта работает только для p1, i1. Я хочу, чтобы она разветвлялась для p1, i1, p2, i2 и т. Д.

 function product(id){
            var userInput = document.getElementById("i1").value;
            document.getElementById("p1").innerHTML = userInput;
        }

Вызов функции выглядит следующим образом:

<button type='button' onclick='product()'>Name product</button>

Answer 1

Вам нужно передать индекс функции:

function product(id) {
    var userInput = document.getElementById("i"+id).value;
    document.getElementById("p"+id).innerHTML = userInput;
}

Ваш HTML будет выглядеть так:

<button type='button' onclick='product(1)'>Name product</button>

надеюсь это поможет.

Answer 2

Вы можете использовать цикл, чтобы установить сделать все изменения

function product(){
   for (var i=0;i < totalNumberofItems;i++){
      var userInput = document.getElementById("i"+i).value;
      document.getElementById("p"+i).innerHTML = userInput;
   }
}

То есть если вы хотите кнопку обновить все поля