Hola estoy intentando hacer un ejercicio, pero al darle clic me da error, al crear dicho elemento, aunque me parece que estoy poniendo mal la lógica del código, la idea es crear un elemento con la primer a imagen y que luego con el teclado vaya mostrando cada una de ellas, desplazándose con las flechas del teclado.
Esto es lo que tendría que hacer el código :
- Partiendo de un documento html con el body vacío, añade el código javascript necesario para crear un un botón que al pulsarlo cree un elemento con la primera imagen, captura los eventos de teclado de forma que podamos mostrar cada una de las imágenes desplazándonos con las flechas del teclado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio1</title>
</head>
<body>
<script type="text/javascript">
var boton = document.createElement("button");
boton.innerHTML = "Crear Imagen";
document.body.appendChild(boton);
boton.onclick = function() {
//alert("Has hecho click");
var myImage = new Image(100,200);
var imagen = document.createElement(myImage.src = 'img/1.png');
var br = document.createElement("br");
br.innerHTML = "<br>";
document.body.appendChild(br);
document.body.appendChild(imagen);
};
</script>
</body>
</html>
Este es el error que me da al crear el primer elemento, no se como hacer los eventos del teclado.
Error:{
"message": "Uncaught InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('img/1.png') is not a valid name.",
"filename": "https://stacksnippets.net/js",
"lineno": 26,
"colno": 35
}
createElement
espera recibir el nombre de una etiqueta html y tu le diste estomyImage.src = 'img/1.png'