JavaScript keydown event does not work

Question

Here's my problem: I have 6 images:

<img class="img" src="key_1.png" />
<img class="img" src="key_2.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_4.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_6.png" />

What i want to do is that when i press the 'up' and 'down' arrow keys, the images rotate:

document.onkeydown = function () {
    switch (window.event.keyCode) {
    case 38:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)"
        break;
    case 40:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)"
        break;
    }
};

But it won't work.

Answer 1

event should be passed as the parameter to the event handler. When an event occurs, the event object is passed as the parameter to the event handler. It is not global object so you cannot use it like window.event .

 var eventHandler = function(event) { console.log(event.keyCode); // Your code here switch (event.keyCode) { case 38: document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)" break; case 40: document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)" break; } }; document.addEventListener('keydown', eventHandler, false); 

 <img class="img" src="key_1.png" /> <img class="img" src="key_2.png" /> <img class="img" src="key_3_5.png" /> <img class="img" src="key_4.png" /> <img class="img" src="key_3_5.png" /> <img class="img" src="key_6.png" /> 

Answer 2

The following code will rotate all images 1deg clock/counter clockwise on every key press.

 var deg = 0, $img = $( 'img' ); function rotateImages ( deg ) { $img.css({ '-webkit-transform': 'rotate(' + deg + 'deg )', '-moz-transform': 'rotate(' + deg + 'deg )', 'transform': 'rotate(' + deg + 'deg )' }); } $( document ).on( 'keydown', function ( e ) { e.preventDefault(); // Prevents the page from scrolling up/down switch( e.keyCode || e.which ) { case 38: deg++; rotateImages( deg ); break; case 40: deg--; rotateImages( deg ); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> 

Answer 3

Try this:

function rotate(deg) {
  var elems = document.getElementsByClassName('img');
  for(var i in elems) {
    var elem = elems[i];
    elem.style.webkitTransform = 'rotate('+deg+'deg)';
  }
}

document.onkeydown = function(event) {
    switch(event.keyCode) {
        case 38:
            rotate(7);
            break;
        case 40:
            rotate(-14);
            break;
    }
};

Running sample: http://plnkr.co/edit/RAg0wbwALTvT2tfzPumH?p=preview

Note that I had to rewrite the rotation as you were using getElementsByClassName that returns a list and not a single object, so you have to iterate it over.

Edit: Although check this for the "correct" non intrusive way of doing it with addEventListener: http://plnkr.co/edit/FpYfow6Wmou8zGs483hc?p=preview