'Why recorded a space bar in keypress event will cause some exception

I had an issue inside my code, there it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function typeWriter() {

            function genOutput() {

                function genText() {
                    //generate random alphabet via ASCII char code
                    return String.fromCharCode(0|Math.random()*26+97);
                }

                const text = document.getElementById("genText");
                text.textContent = genText() + text.textContent;
            }

            const text = document.getElementById("genText");
            const score = document.getElementById("scoreBoard");

            text.textContent = "";
            window.setInterval(genOutput, 400);  //automatically generate one charracter per 0.4 sec
            document.addEventListener('keypress', (e) => {
                const input = String.fromCharCode(e.charCode);
                const lastCharacter = text.textContent.charAt(text.textContent.length-1);
                if (input == lastCharacter) {
                    const newText = text.textContent.slice(0, -1);
                    text.textContent = newText;
                    score.innerText = "" + (parseInt(score.innerText)+3);
                    
                }
                else if (input == " ") {
                    //check if user type space bar
                    alert("Click to continue");   //if remove this alert will occur exception
                }
                else {
                    score.innerText = "" + (parseInt(score.innerText)-1);
                }
            })
        }
    </script>
    <div class="container">
        <p id="title">Typewriter 2.0</p>
    </div>
    <div class="container">
        <h1 id="genText">Typed correct +3 pt, incorrect -1 pt</h1><br>
        <button id="startBtn" onclick="typeWriter()">Click to Start</button>
        <span>Score: </span><span id="scoreBoard">10</span>
    </div>
</body>
</html>

The simple code above is a typewriter web game, it generates an alphabet randomly every 400ms, and removes the last character if a user types correctly. However, the issue is, that when the user types the space bar, the countdown of the interval restart and generate more and more alphabet at one time. I tried to check if the user types the space bar and inserts the alert function, it can prevent the exception occur, but somehow it became a pause button. Can anyone explain to me how and why this exception happens? Thank you so much!

javascript keyboard-events

Solution 1:^[1]

Your click to start button has focus after it is pressed, so spacebar will act to click the button again.

The alert caused focus to move away from the button, which is why spacebar no longer fired the event.

If you want to remove focus, you can add a blur event (on the button) to remove focus so spacebar won't function to click the button

e.target.blur();

In the event listener, e.target is the button that was clicked, so we can programmatically fire the blur event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function typeWriter() {

            function genOutput() {

                function genText() {
                    //generate random alphabet via ASCII char code
                    return String.fromCharCode(0|Math.random()*26+97);
                }

                const text = document.getElementById("genText");
                text.textContent = genText() + text.textContent;
            }

            const text = document.getElementById("genText");
            const score = document.getElementById("scoreBoard");

            text.textContent = "";
            window.setInterval(genOutput, 400);  //automatically generate one charracter per 0.4 sec
            document.addEventListener('keypress', (e) => {
            e.target.blur(); // remove focus from the button so spacebar won't continue game
                const input = String.fromCharCode(e.charCode);
                const lastCharacter = text.textContent.charAt(text.textContent.length-1);
                if (input == lastCharacter) {
                    const newText = text.textContent.slice(0, -1);
                    text.textContent = newText;
                    score.innerText = "" + (parseInt(score.innerText)+3);
                    
                }
                else if (input == " ") {
                    //check if user type space bar
                 //   alert("Click to continue");   //if remove this alert will occur exception
                }
                else {
                    score.innerText = "" + (parseInt(score.innerText)-1);
                }
            })
        }
    </script>
    <div class="container">
        <p id="title">Typewriter 2.0</p>
    </div>
    <div class="container">
        <h1 id="genText">Typed correct +3 pt, incorrect -1 pt</h1><br>
        <button id="startBtn" onclick="typeWriter()">Click to Start</button>
        <span>Score: </span><span id="scoreBoard">10</span>
    </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Eric Phillips

'Why recorded a space bar in keypress event will cause some exception

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]