影响所有元素的javascript函数

Question

I'm trying to develop a shopping cart that allows the user to increase/decrease the quantity of an item in the cart by using a slider.

Each item in the cart has its own quantity slider.

The problem is that if there's more than 1 item in the cart, moving the slider for any item other than the first item only affects the quantity of the first item. In other words, if I have 2 items in the cart and I use the slider to increase the quantity of the 2nd item, the quantity of the 1st item changes instead of the 2nd. The page with the shopping cart is written mainly in php with the function for changing the quantity based on the slider control written in javascript.

What am I doing wrong here?

Here is my code for the javascript function:

    function updateTextInput(val) {
      document.getElementById('textInput').value=val; 
    }

Here is my code for the table cell that calls that function:

<td><input size='3' type='range' name=\"qty[{$row['product_id']}]\" min='0' max='".$stock."' onchange='updateTextInput(this.value);'>
        <input id='textInput' size='3' readonly value=\"{$_SESSION['cart'][$row['product_id']]['quantity']}\"></td>

Thank you for your help.

Answer 1

ID of DOM elements have to be unique at whole page. Well, some fix:

<td>
    <input size='3' type='range' name=\"qty[{$row['product_id']}]\" min='0' max='".$stock."' onchange='updateTextInput(this.value, {$row['product_id']});'>
    <input id='textInput_{$row['product_id']}' size='3' readonly value=\"{$_SESSION['cart'][$row['product_id']]['quantity']}\">
</td>

And fix javascript:

function updateTextInput(val, product_id) {
    document.getElementById('textInput_' + product_id).value = val; 
}