Question

I have product name(in paragraph), text form and button. The products have id’s as follows p1,p2… The input types have id’s as follows i1,i2…After typing something in the form and clicking submit I want this to change the default product text. I have the following function which works only for one set(paragraph,form and button). The problem is that this product function works only for p1,i1 I want it to fork for p1,i1,p2,i2 and etc.

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

The function call is as follows:

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

Answer 1

what you need is to pass the index to the function:

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

your html would look like:

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

hope this helps.