foreach循环中的自定义输入编号

Question

I have make a new style for my input number, and this work well. My problem is when I add this is a foreach structure this doesn't work. I think the problem is the ID change the value, but inside the foreach all all inputs have the same ID.

This is my code inside the foreach:

    <div class='value-button' id='decrease' onclick='decreaseValue()' value='Decrease Value'>-</div>
                <input size='1' id='number' name='product[<?= $p->id ?>]' value='<?= $p->qty ?>' />
<div class='value-button' id='increase' onclick='increaseValue() 'value='Increase Value'>+</div>

This is the js code:

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

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
}

I have try to give unique id, but dosen't work. If I add like <?= $p->id ?> instead of id number this does not work.

How I can do? If needed, I can also change the html of the input.

Thank you

This is My last test:

<td class="qty">
      <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
        <input size="1" id="92" name="product[92]" value="3">
      <div class="value-button" id="increase" onclick="increaseValue() " value="Increase Value">+</div>
      <script>
      function increaseValue() {
        var value = parseInt(document.getElementById('92').value);
        value = isNaN(value) ? 0 : value;
        value++;
        document.getElementById('92').value = value;
      }

      function decreaseValue() {
        var value = parseInt(document.getElementById('92').value);
        value = isNaN(value) ? 0 : value;
        value < 1 ? value = 1 : '';
        value--;
        document.getElementById('92').value = value;
      }
      </script>
    </td>

I try to add the js inside the foreach, with the same id of the input. But doesn't work.

Answer 1

You could use the id of the input as parameter for calling increaseValue and decreaseValue. The attribute id should be unique and you could use a proper prefix and the product number/identifier for it.

Maybe you change the quoting for attribute to ", instead of ' (this could be a matter of a given style guide). If you do so, then stay allways by the same style. You could nest quotes by using the other unused quote inside of a javascript parameter.

onclick="decreaseValue('product[<?= $p->id ?>]')"
        ^                                       ^  outer
                       ^                      ^    inner

function increaseValue(id) {
    var value = +document.getElementById(id).value || 0;
    value++;
    document.getElementById(id).value = value;
}

function decreaseValue(id) {
    var value = +document.getElementById(id).value || 0;
    value--;
    if (value < 1) {
        value = '';
    }
    document.getElementById(id).value = value;
}

<div class="value-button" onclick="decreaseValue('product[<?= $p->id ?>]')">-</div>
<input size="1" id="product[<?= $p->id ?>]" name="product[<?= $p->id ?>]" value="" />
<div class="value-button" onclick="increaseValue('product[<?= $p->id ?>]')">+</div>

</div>