Run a function in a loop as long as specific keys is pressed

Question

Run a function in a loop as long as specific keys is pressed

1.3k views Asked by Anya At 25 December 2013 at 06:27

I want to run specific piece of code repeatedly as long as arrow keys are pressed. I have tried to pick up as much things as I can in a week about JavaScript and have written this code (see below), but it isn't working. Right now I am trying to print a something on the page, but in final implementation I would need to run a file repeatedly. Also I would like to know a way to print the results of newly executed function without erasing anything that's already on the screen.

<html>

<head>
<title>

</title>
</head>

<body>

<script>

document.write("Script loaded <br/>");

document.onkeydown=initiate;

function initiate{
$(document).keydown(function(event) {
keyCode=event.keyCode;
event.preventDefault();
});
}

if(keyCode==38){
window.setInterval({a()},100);
function a(){
document.write("Up key</br>");
}

else if(keyCode==39){
window.setInterval({b()},100);
function b(){
document.write("Right key</br>");
}

else if(keyCode==40){
window.setInterval({c()},100);
function c(){
document.write("Down key</br>");
}

else if(keyCode==41){
window.setInterval({d()},100);
function d(){
document.write("Left key</br>");
}

</script>

</body>

</html>

P.S.: Please excuse my bad scripting skills. I tried to grasp everything in a hurry in order to integrate it into a project I am working on.

Original Q&A

There are 2 answers

**Satpal** · Answer 1 · 2013-12-25 06:37:24

Problems in your code

if-else block is not correct.
embedded if-block in the keydown event handler
Define function separately
$(document).keydown is jQuery, not native JavaScript, you don't need it.

Code:

document.write("Script loaded <br/>");
document.onkeydown = initiate;

function initiate() {
    keyCode = window.event.keyCode;
    event.preventDefault();
    if (keyCode == 38) {
        window.setInterval({
            a()
        }, 100);
    } else if (keyCode == 39) {
        window.setInterval({
            b()
        }, 100);
    } else if (keyCode == 40) {
        window.setInterval({
            c()
        }, 100);
    } else if (keyCode == 41) {
        window.setInterval({
            d()
        }, 100);
    }
}

function a() {
    document.write("Up key</br>");
}

function b() {
    document.write("Right key</br>");
}

function c() {
    document.write("Down key</br>");
}

function d() {
    document.write("Left key</br>");
}

**HIRA THAKUR** · Answer 2 · 2013-12-25 06:37:35

Please clean up your code a little.you are making things unnecessatily complex

Define all you functions a,b,c,d and then use the following code.If you are using jquery,use appropriate handler.

document.onkeydown = function() {
    switch (window.event.keyCode) {
        case 37:
            window.setInterval(a,100);
            document.write("left key</br>");
            break;
        case 38:
            window.setInterval(a,100);
            document.write("up key</br>");
            break;
        case 39:
            window.setInterval(c,100);
            document.write("right key</br>");
            break;
        case 40:
            window.setInterval(d,100);
            document.write("down key</br>");
            break;
    }
};

Note:

1.It is a better practice to use innerHTML instead of document.write.

2.Use keydown, not keypress for non-printable keys such as arrow keys

TechQA.

Run a function in a loop as long as specific keys is pressed

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in KEYDOWN

Related Questions in KEYBOARD-INPUT

Popular Questions

Popular Tags

Trending Questions