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.

Read this: http://stackoverflow.com/questions/9813445 `window.event` isn’t supported in modern browsers. — Sebastian Simon, Aug 26 '15 at 10:33
Also note the code you're developing is intrusive. Check this for a non intrusive way of implementing it using addEventListener/attachEvent: http://stackoverflow.com/questions/2657182/correct-usage-of-addeventlistener-attachevent — Alfonso Presa, Aug 26 '15 at 10:35

Tushar · Answer 1 · 2015-08-26T10:37:11.360

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" />

@PraveenKumar Done. Was doing the same thing – Tushar Aug 26 '15 at 10:41 — Tushar, Aug 26 '15 at 10:41

score 1 · Accepted Answer · answered Aug 26 '15 at 11:28

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">

Alfonso Presa · Answer 3 · 2015-08-26T10:49:55.633

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

JavaScript keydown event does not work

3 Answers3