Estamos haciendo un sitio para jugar y resolver Sudoku. Para esto, queríamos una función javascript que se ejecutara cuando presionas un número. Pero la llamada onkeypress está actuando raro. Da el número de celda en el que lo está cambiando, pero no ve la entrada en sí misma al presionar una tecla, a menos que la presione dos veces. (?) O dar enter. ¿Cómo funcionaría correctamente ambos? También se encuentra aquí: www.patternsinwords.com/sudoku por si quieres probar. Saludos cordiales, Jaap
<html> <head> <script type="text/javascript"> function myFunction(val) { var x = document.getElementById(val).value; document.getElementById("alerts").innerHTML = "You changed " + x + " on cell " + (val+1); } </script> <style> input[type=text] { width: 20px; border: none; font-size: 20px; align: center; } table{ border-collapse: collapse; } div{ align: center; } td:nth-child(3) {border-right: 2px solid black;} td:nth-child(6) {border-right: 2px solid black;} tr:nth-child(3) {border-bottom: 2px solid black;} tr:nth-child(6) {border-bottom: 2px solid black;} </style> </head> <body> <center> <?php echo '<br><table border="3"><tr>'; $vertical = 0; for ($i=0;$i<=80;$i++){ if ($i%9==0 && $i>0){ $vertical++; echo '</tr><tr>'; } echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" onkeypress="myFunction('.$i.')">'; } echo '</tr></table>'; echo '<br><div id="alerts"></div>'; ?> </center> </body> </html>No puede obtener un nuevo valor del elemento de entrada debido al orden de los eventos. El evento Keypress (es mejor usar keydown o input event porque Keypress es un evento obsoleto) se activa antes del valor establecido en el elemento de entrada. Usando el evento de pulsación de tecla, puede obtener solo un valor de entrada previamente establecido.
Para resolver el problema, puede usar el evento 'input':
echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" oninput="myFunction('.$i.')"></td>';Otra forma es obtener el valor de entrada directamente del evento. En mi opinión, esta es la mejor manera porque no tienes que acceder al DOM para obtener el valor que ya tienes. Si prefiere usar el caso basado en eventos, debe cambiar su función a
function myFunction(e, cellId) { var key = e.key; document.getElementById("alerts").innerHTML = "You changed " + key + " on cell " + (cellId+1); }y marcado de celda para
echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" onkdown="myFunction(event, '.$i.')"></td>';