Soy nuevo en esta bonita comunidad. Soy un joven estudiante de informática y estoy tratando de desarrollar una aplicación basada en la web para ayudar tanto a las personas videntes como a las personas con discapacidad visual a aprender a escribir. Mi proyecto fue bloqueado por el siguiente problema: Dada una cadena, necesito verificar que el usuario haya presionado la tecla que corresponde al primer carácter. Si es correcto, el programa debe probar el siguiente carácter, hasta el final de la cadena. Las soluciones más naturales parecen ser un bucle, así:
do { var checkCharacter=lessons[exerciceNumber][2].substr(charNumber, 1); document.addEventListener('keydown', testKey); } while (charNumber<=lessons[exerciceNumber][2].length-1);Cuando ejecuto el script, no aparece nada y parece que no detecta las teclas presionadas. ¿Puedes ayudarme por favor? Para entender el contexto, adjuntaré el archivo completo.
<?php include "config.php"; //Select fields from database $sql="SELECT lesson_number, exercice_number, text FROM lessons"; $result=$conn->query($sql); //Pass variables to javascript $output="<script> var lessons=new Array(); "; while ($row=$result->fetch_assoc()) { $output.="lessons.push([ ".$row["lesson_number"].", ".$row["exercice_number"].", '".$row["text"]."']);"; } $output.="</script>"; echo $output; ?> <html> <head> <title>Impara a scrivere</title> </head> <body> <h2 id="lesson"></h2> <p id="instructions"></p> <p id="check"></p> <p id="keyList"></p> </body> <script> //define variables var keys=""; var exerciceNumber=0; var charNumber=0; //Function to play the sounds function sound(name) { var audio=new Audio(name+'.mp3'); audio.play();} document.getElementById("lesson").innerHTML="Lezione "+lessons[exerciceNumber][0]; document.getElementById("instructions").innerHTML="Esercizio "+lezioni[exerciceNumber][1]+": scrivi <b>"+lessons[exrciceNumber][2]+"</b>."; //function to check pressed keys funtion testKey(event) { if (event.key==checkCharacter) { sound ("right"); keys+=event.key; document.getElementById("keyList").innerHTML=keys; } else { sound("wrong"); } } //loop for the exercices do { var checkCharacter=lessons[exerciceNumber][2].substr(charNumber, 1); document.addEventListener('keydown', testKey); } while (charNumber<=lessons[exerciceNumber][2].length-1); </script> </html>No puede agregar un detector de eventos varias veces, eso hará que se active una vez. Para evitar esto, intente usar onkeydown . Por ejemplo, algo como esto debería funcionar:
do { const checkCharacter = lessons[exerciceNumber][2].substr(charNumber, 1); document.onkeydown = (evt) => { testKey(); }; } while (charNumber <= lessons[exerciceNumber][2].length - 1);Además, no estoy del todo seguro de lo que está tratando de hacer aquí, pero en lugar de usar un bucle, puede hacer algo como esto:
form.onsubmit = (evt) => { const input = someInput.value; if (testKey() === input) { return true; // Or whatever you want } };¡Esperaba que esto ayudara!