Как поменять класс при событии keypress?

Question

[blackbb]

Есть 5 скрытых картинок на странице:

<img src="/media/images/resort/1.jpg" id="img-1">
<img src="/media/images/resort/2.jpg" id="img-2">
<img src="/media/images/resort/3.jpg" id="img-3">
<img src="/media/images/resort/4.jpg" id="img-4">
<img src="/media/images/resort/5.jpg" id="img-5">

У всех id прописана опция display:none. Как сделать, чтобы по нажатию на клавишах клавиатуры, например 1,2,3,4,5, к определенной картинке добавлялось свойство display:block?

Answer 1

[gleendo]

let images = document.body.querySelectorAll(`img`);

document.addEventListener(`keydown`, event => {
  let index = +String.fromCharCode(event.which) - 1;

  if (index < 5) {
    images[index].style.display = `block`;
  }
}, false);

demo

Comments

[blackbb]

Спасибо)