I made a piece of code that moves an element vertically in front of 6 items with arrow up and down. When enter is pressed i will load a set of images with that item. The code works fine but after enter is hit, this piece of code needs to stop, so i can do other things with my arrow keys and enter. Now it just keeps going after enter is hit. I tried it with a var check as you can see but i cant seem to change the variable from within the switch. Someone have an idea how to make this work?

var enterPushed = false;

if(!enterPushed){   
        document.addEventListener('keydown', function(event){
    if(event.keyCode == 38){
        console.log("up");
        if(margTop > 122){
            margTop = margTop - 60;
            marginTop();
            i = i - 1;
            bliep.play();
        }
    }
    if(event.keyCode == 40){
        console.log("down");
        if(margTop < 422){
            margTop = margTop + 60;
            marginTop();
            i = i + 1;
            bliep.play();   
        }
    }
    if(event.keyCode == 13){
        switch(i){
            case 1:
                enterPushed = true;
                startup(1);         
            break;
            case 2:
                enterPushed = true;
                startup(2);             
            break;
            case 3:
                enterPushed = true;
                startup(3);         
            break;
            case 4:
                enterPushed = true;
                startup(4);         
            break;
            case 5:
                enterPushed = true;
                startup(5);             
            break;
            case 6:
                enterPushed = true;
                startup(6);         
            break;
        }
    }
});
}

I made a piece of code that moves an element vertically in front of 6 items with arrow up and down. When enter is pressed i will load a set of images with that item. The code works fine but after enter is hit, this piece of code needs to stop, so i can do other things with my arrow keys and enter. Now it just keeps going after enter is hit. I tried it with a var check as you can see but i cant seem to change the variable from within the switch. Someone have an idea how to make this work?

var enterPushed = false;

if(!enterPushed){   
        document.addEventListener('keydown', function(event){
    if(event.keyCode == 38){
        console.log("up");
        if(margTop > 122){
            margTop = margTop - 60;
            marginTop();
            i = i - 1;
            bliep.play();
        }
    }
    if(event.keyCode == 40){
        console.log("down");
        if(margTop < 422){
            margTop = margTop + 60;
            marginTop();
            i = i + 1;
            bliep.play();   
        }
    }
    if(event.keyCode == 13){
        switch(i){
            case 1:
                enterPushed = true;
                startup(1);         
            break;
            case 2:
                enterPushed = true;
                startup(2);             
            break;
            case 3:
                enterPushed = true;
                startup(3);         
            break;
            case 4:
                enterPushed = true;
                startup(4);         
            break;
            case 5:
                enterPushed = true;
                startup(5);             
            break;
            case 6:
                enterPushed = true;
                startup(6);         
            break;
        }
    }
});
}

• javascript

• 1 FYI, you can drop the switch, and just do if (i >=1 && i <= 6) { enterPushed = true; startup(i); }. Though a switch would be a good replacement for all your if(event.keyCode...) statements. – user1106925 Commented Dec 3, 2015 at 17:41

3 Answers 3

Now you can pass a once boolean in the options object like this: document.body.addEventListener('click', _ => console.log('once'), {once: true});

Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Browser compatibility at the moment: Chrome 55, Firefox 50, Safari (WebKit) nightly.

If you want to stop all key events just remove the event listener.

var enterPushed = false;

var handleKeyDown = function(){
    if(event.keyCode == 38){
        console.log("up");
    }
    if(event.keyCode == 40){
        console.log("down");
    }
    if(event.keyCode == 13){
      console.log('enter');
      document.removeEventListener('keydown', handleKeyDown);      
    }
};

document.addEventListener('keydown', handleKeyDown);

If you want to stop listening for just the enter or a specific key you can add a flag and check against that as well as the keycode. Which looks like what you've almost done here. I finished the logic and reduced the code:

if(event.keyCode == 13 && enterPushed){
   enterPushed = true;
   startup(i);  
}

Funnily enough the method to deattach an event listener is called exactly as one would expect: removeEventListener(type, listener[, useCapture]):

function listenOnce(node, type, listener, useCapture) {
    if (useCapture == null) {
        useCapture = false;
    }

   function wrapper() {
        node.removeEventListener(type, wrapper, useCapture);
        return listener.apply(this, arguments);
    }

    node.addEventListener(type, wrapper, useCapture);
}