How to change values of div when press key down

Question

I have made divs in my HTML that I use to draw bars with CSS. Now I want the to values change when the user presses the down arrow key.

This is my JavaScript:

var changeIdValue = function(id, value) {
document.getElementById(id).style.height = value;
};

window.addEventlistener("onkeydown", function(e){
if(e.keyCode == 40){
    changeIdValue("balklongwaarde", "60px");
});
}

I don't understand why this is not working.

Start simpler. Debugger line in the body of you function; does it ever trigger. [Follow the MDN example](https://developer.mozilla.org/en-US/docs/Web/API/Window.onkeydown) — jurassix, Jun 25 '14 at 12:32
Use jQuery http://jquery.com/ instead, it is much simpler to have JavaScript listeners with jQuery — John Skoumbourdis, Jun 25 '14 at 12:36

score 2 · Answer 1 · answered Jun 25 '14 at 12:52

I know this has been answered already, but if you want to follow your original idea, here's the correct code (because Mritunjay's answer only works for one usage per page).

var changeIdValue = function (id, value) {
        document.getElementById(id).style.height = value;
    };
window.addEventListener('keydown', function (e) {
    if (e.keyCode === 40) {
        changeIdValue('balklongwaarde', '60px');
    }
});

addEventListener is written with a capital L in Listener
'onkeydown' should be 'keydown' when used with the addEventListener function
You closed your brackets in the wrong order (close if, close function, close function call)

score 0 · Accepted Answer · answered Jun 25 '14 at 12:33

0

You can say something like this

window.onkeydown = function(e){
        if(e.keyCode == 40)
            changeIdValue("balklongwaard", "60px");
        };

answered Jun 25 '14 at 12:33

Mritunjay

25,338
7
55
68

How to change values of div when press key down

2 Answers2