Adding an event listener to an image

Question

I have been working on a small project where I have to resize a car. However, whenever I press the left arrow, the car is supposed to resize, but nothing happens. This is my Javascript code:

var car = document.getElementById('cr');

 car.addEventListener("keydown",function(event){

  if(event.which == 37){
 //left
console.log('left');
car.style.width = 10 + "px";

 }

if(event.which == 39){
//right
}
})

Answer 1

The event listener is on the image so it will only fire if the image has the focus when a key is pressed down. (That or a descendant element, but images can't have descendants).

Images can't, by default, have the focus anyway.

Attach the event listener to the window object instead.