Traté de agregar botones al frente de cada fila, pero solo el de la primera fila seguiría mi función setColor().
while(($row=mysqli_fetch_assoc($result))&&($cnt<5)){ if($row['type']=='0') { $cal+=$row['kcal']; $price+=$row['price']; if(($cal<=($_SESSION['calorie'])/3)){ echo"<tr> <td> <form> <input type='button' value='+' onclick='setColor()' id='btn'> </form></td> <td>".$row['product']."</td> <td>".$cal."</td> <td>".$price."</td> </tr>"; $cnt+=1; } $price=0; $cal=0;} }aquí está el código de la función setColor JS
<script> function setColor(){ var count=1; if (count == 0){ document.getElementById('btn').style.color = "gray"; count=1; } else{ document.getElementById('btn').style.color = "orange"; count=0; } count=0 } </script>¿Cómo puedo separarlos manteniendo el ciclo while? Gracias.
Debe informar al sistema qué botón desea cambiar al hacer clic en el botón, uno de los métodos es usar una ID de botón única.
Por lo tanto, simplemente cambie a
$index=0; while(($row=mysqli_fetch_assoc($result))&&($cnt<5)){ if($row['type']=='0') { $cal+=$row['kcal']; $price+=$row['price']; if(($cal<=($_SESSION['calorie'])/3)){ echo"<tr> <td> <form> <input type='button' value='+' onclick='setColor(". $index . ")' id='btn". $index . "'> </form></td> <td>".$row['product']."</td> <td>".$cal."</td> <td>".$price."</td> </tr>"; $cnt+=1; } $price=0; $cal=0;} $index++; }y usa el siguiente JS
<script> function setColor(var1){ var count=1; if (count == 0){ document.getElementById('btn'+var1).style.color = "gray"; count=1; } else{ document.getElementById('btn'+var1).style.color = "orange"; count=0; } count=0 } </script>Para el código JS, no sé cuál es el propósito del "recuento", por lo que es posible que desee modificar el código para adaptarlo a sus necesidades.