Button change number in PHP-CodePudding

I have a website where I list the store products and want start a make orders. However, for begins, I need change the numbers of the each one.

My code is:

$run_produtos = mysqli_query($con,$get_produtos);

while($row_produtos=mysqli_fetch_array($run_produtos)){
    
                $id = $row_produtos['id'];
                $categoria = $row_produtos['categoria'];
                $foto = $row_produtos['foto'];
                $nome = $row_produtos['nome'];
                $descricao = $row_produtos['descricao'];
                $preco = $row_produtos['preco'];

            echo "
                <div style='text-align: left;''>
                    <center>
                            <img src='produtos/$foto' style='width: 200px; height: auto; border: 2px solid grey'>
                            <h3>$nome</h3>
                            <h4>$descricao</h4>
                            <h3>Valor: R$ $preco</h3>

<form>

<input style='font-size: 20px;' type='button' onclick='decreaseValue()' value='-' />
<input style='font-size: 20px; width: 70px; text-align: center;' type='text' id='number' value='$number'/>
<input style='font-size: 20px;' type='button' onclick='incrementValue()' value=' ' />

</form>

</center>
<hr>
                        </div>
                <br>
                ";
}

And the button code is:

<script>
function incrementValue()
{
    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--;
    document.getElementById('number').value = value;
}
</script>

The button works! The problem is that his changes the numbber only in the first product. I guess that I need indexed this products, but when I try, the website shows only one product.

Please, what I do make?

CodePudding user response：

Change the duplicate id='number' so they're unique by including $id in it.

$run_produtos = mysqli_query($con,$get_produtos);

while($row_produtos=mysqli_fetch_array($run_produtos)){
    
    $id = $row_produtos['id'];
    $categoria = $row_produtos['categoria'];
    $foto = $row_produtos['foto'];
    $nome = $row_produtos['nome'];
    $descricao = $row_produtos['descricao'];
    $preco = $row_produtos['preco'];

    echo "
          <div style='text-align: left;''>
              <center>
                  <img src='produtos/$foto' style='width: 200px; height: auto; border: 2px solid grey'>
                  <h3>$nome</h3>
                  <h4>$descricao</h4>
                  <h3>Valor: R$ $preco</h3>

                  <form>
                      <input style='font-size: 20px;' type='button' onclick='decreaseValue($id)' value='-' />
                      <input style='font-size: 20px; width: 70px; text-align: center;' type='text' id='number$id' value='$number'/>
                      <input style='font-size: 20px;' type='button' onclick='incrementValue($id)' value=' ' />
                  </form>
              </center>
              <hr>
          </div>
          <br>
                ";
}

Then change the JS so it uses the id argument.

<script>
function incrementValue(id)
{
    var el = document.getElementById('number' id)
    var value = parseInt(el.value, 10);
    value = isNaN(value) ? 0 : value;
    value  ;
    el.value = value;
}
function decreaseValue()
{
    var el = document.getElementById('number' id)
    var value = parseInt(el.value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    el.value = value;
}
</script>

You could also <input type='number'> instead. Most browsers will generate /- controls in the input, so you don't need to do it yourself.