CODEWITHSUNDEEP
javascript
Rafael Sofi-zadeh
Rafael Sofi-zadeh

Reputation: 29

JavaScript keydown event does not work

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.

Upvotes: 0

Views: 606

Answers (3)

justinledouxweb
justinledouxweb

Reputation: 1357

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

Upvotes: 1

Alfonso Presa
Alfonso Presa

Reputation: 1034

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

Upvotes: 0

Tushar
Tushar

Reputation: 87233

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

Upvotes: 2

Related Questions