Load a random image by pressing a key

Question

Load a random image by pressing a key

Navigation

#1 by (1 votes)

-1

I can not link my UP , DOWN , LEFT and RIGHT keys to the cambiarImagen function. With the id=boton I get ... but with certain keys not.

<script>

$(function() {

  var imagenes = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg'
  ];

  function obtenerImagenAleatoria() {
    return imagenes[Math.floor(Math.random() * imagenes.length)];
  }

  function cambiarImagen() {
    $('#imagen').attr('src', obtenerImagenAleatoria());
  }

  // Imagen inicial
  cambiarImagen();

  // Eventos
  // $('#boton').on('click', cambiarImagen);


});
document.onkeypress = function(event) {
  // per les tecles de lletres cal usar charCode
  //per a les tecles up, down, left, right cal usar keyCode
  var tecla = event.keyCode
  if (tecla == 37) {cambiarImagen();
  }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<body>

  <img id="imagen" alt="Imagen aleatoria"><br/>

</body>

javascript jquery onkeypress

asked by Marta Calvó 04.05.2018 в 10:15

source

1 answer

Convert a String to Array [Int] and vice versa iOS TabBarController

score 1 · Answer 1

keypress ignore the arrows, you have to use keydown or keyup .

  var imagenes = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg'
  ];

	function obtenerImagenAleatoria() {
		return imagenes[Math.floor(Math.random() * imagenes.length)];
	}

	function cambiarImagen() {
		$('#imagen').attr('src', obtenerImagenAleatoria());
	}

	cambiarImagen();

document.onkeydown = cambiarImagenEvento;

function cambiarImagenEvento(e) {
	var tecla = event.keyCode;

	if (tecla == 37 || tecla == 38 || tecla == 39 || tecla == 40) {
		cambiarImagen();
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <img id="imagen" alt="Imagen aleatoria" /><br/>

</body>