keypress arrows down not working

Question

event on keypress arrows down not working, not changing color to red, no errors at console, What i'm doing wrong?

 var getText = document.getElementsByTagName('h1')[0];

            getText.onclick = function() {
                    getText.innerHTML = "Simple";
            }

              function keyPress() {
                if(event.which == 13) { 
                    getText.style.color = 'blue';
                }

                if(event.which == 40) {
                    getText.style.color = 'red';
                }
            }

Your code is missing some part... Where does the `event` variable gets set? I don't see you listening to the keypress event either. — Salketer, Oct 07 '15 at 07:58
Also, arrow keys are usually not triggering the keypress event... But I'll give more details about all this once I see your real case. — Salketer, Oct 07 '15 at 07:59

score 1 · Accepted Answer · edited Oct 07 '15 at 08:07

As @Salketer noted you need an event listener to observe keyboard events. The keyPress function could be used as event handler in that case. (But event must be set as the first argument in the function definition.)

var getText = document.getElementsByTagName( 'h1' )[0];

function keyPress( event ) {
    if(event.which == 13) { 
        getText.style.color = 'blue';
    }

    if(event.which == 40) {
        getText.style.color = 'red';
    }
}

/* Setup an event listener and use keyPress as event handler */
window.addEventListener( 'keydown', keyPress, false );

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

keypress arrows down not working

1 Answers1