循环中的 addEventListener

Question

I'm new in this nice community.我是这个美好社区的新人。 I am a young student in computer science and I'm trying to develope a web based app to help both sighted people and people with visual empairment to learn typing.我是一名计算机科学专业的年轻学生，我正在尝试开发一个基于 web 的应用程序，以帮助有视力的人和视障人士学习打字。 My project was blocked by the following problem: Given a string, I need to verify that the user has pressed the key that corresponds to the first character.我的项目被以下问题阻止：给定一个字符串，我需要验证用户是否按下了与第一个字符对应的键。 If it is correct, the program should test the next character, until the end of the string.如果它是正确的，程序应该测试下一个字符，直到字符串的结尾。 The most natural solutions seems to be a loop, like that:最自然的解决方案似乎是一个循环，就像这样：

        do {
        var checkCharacter=lessons[exerciceNumber][2].substr(charNumber, 1);
        document.addEventListener('keydown', testKey);
    }
    while (charNumber<=lessons[exerciceNumber][2].length-1);

When I run the script, nothing appears and it seems it doesn't detect the pressed keys.当我运行脚本时，什么都没有出现，而且似乎没有检测到按下的键。 Can you help me please?你能帮我吗？ Inorder to understand the context, I'll attach the entire file.为了理解上下文，我将附上整个文件。

<?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>

Answer 1

You cannot add an event listener multiple times, that will cause it to fire once.您不能多次添加事件侦听器，这将导致它触发一次。 To avoid this, try using onevent .为避免这种情况，请尝试使用onevent 。 For example, something like this should work:例如，这样的事情应该可以工作：

    do {
        var checkCharacter = lessons[exerciceNumber][2].substr(charNumber, 1);
        document.onkeydown = (evt) => {
            testKey();
        };
    } while (charNumber <= lessons[exerciceNumber][2].length - 1);

Hoped this helped!希望这有帮助！

循环中的 addEventListener

问题描述

1 个解决方案

解决方案1
-1 2021-12-01 19:15:47

循环中的 addEventListener

问题描述

1 个解决方案

解决方案1 -1 2021-12-01 19:15:47

解决方案1
-1 2021-12-01 19:15:47