0

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
}
2
  • Deberías subir también el tipo de error que recibes. No veo en tu código ningún evento para capturar las flechas del teclado, el que tienes es para eventos de tipo click. el 19 ene. 2021 a las 10:42
  • Tu error se debe a que createElement espera recibir el nombre de una etiqueta html y tu le diste esto myImage.src = 'img/1.png' el 19 ene. 2021 a las 12:55

3 respuestas 3

3

Hay algunas cosas que faltan. Te dejo un código donde se puede cambiar imágenes con las flechas del teclado o clicando en los botones. Las imágenes deben encontrarse al interno de una carpeta llamada img y deben llamarse img1.png, img2.png, etc.

Consejo: Te lo dejo como ejemplo, pero aunque tu profesor te dé 10 puntos, tener estos conocimientos vale más que una nota. El ejercicio es muy fácil de hacer y debes tomar mi ayuda como una guía para seguir mejorando no para hacer tu vida escolar más fácil para que la laboral luego te sea imposible. Todos hemos estado ahí, así que ¡animo! y a seguir estudiando.

<body>
    <script type="text/javascript">

        // Creación de los elementos html
        var boton1 = document.createElement("button");
            boton1.innerHTML = "<";
            boton1.style.width = "100px";
        var boton2 = document.createElement("button");
            boton2.innerHTML = ">";
            boton2.style.width = "100px";
        var br = document.createElement("br");
        var img = document.createElement("img");
            img.height = 100;
            img.width = 200;
        var Inum = 1;

        // Inserción de los elementos html
        document.body.appendChild(img);
        document.body.appendChild(br);
        document.body.appendChild(boton1);
        document.body.appendChild(boton2);

        // Cambiar imagen con las flechas del teclado
        document.onkeydown = checkKey;                
        function checkKey(e) {

            // Compatibilidad con navegadores
            e = e || window.event;

            if (e.keyCode == '37') {
                // flecha izquierda
                if (Inum >= 2){Inum--} // controla que Inum sea superior a 1 (img0 no existe)
                img.src = 'img/img'+Inum+'.png';
            }
            else if (e.keyCode == '39') {
                // flecha derecha
                if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes (uso: si hay 10 img usar el número 9)
                img.src = 'img/img'+Inum+'.png';
            }
        }

        // Cambiar imagen con los botones
        boton1.onclick = function() {
            // imagen anterior
            if (Inum >= 2){Inum--} // controla que Inum sea superior a 1
            img.src = 'img/img'+Inum+'.png';
        };
        boton2.onclick = function() {
            // imagen siguiente
            if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes
            img.src = 'img/img'+Inum+'.png';
        };

    </script>
</body>
6
  • 1
    Gracias @Ariel Montes, tienes razón, seguiré esforzándome, e intentaré desarrollar la lógica del ejercicio con el ejemplo, aunque el material que nos da es poca cosa para aprender a programar en condiciones, un saludo ! el 19 ene. 2021 a las 11:39
  • 1
    Comentaré más el código para que se entienda mejor. el 19 ene. 2021 a las 11:57
  • 2
    gracias ! la verdad es que la lógica es bastante sencilla y la he entendido, ojala hubieran profesores así ! jeje un saludo ! el 19 ene. 2021 a las 12:00
  • 1
    Muchas gracias David. He corregido un error en la lógica de los botones y comentado el código, he añadido también un control para que no se intente cargar imágenes que no existen. el 19 ene. 2021 a las 12:13
  • 2
    ¡Excelente respuesta y mucho mejor consejo!
    – Triby
    el 19 ene. 2021 a las 16:40
2

El problema que hay a la hora de crear las imágenes es que la estas creando con dos variables diferentes. Una el objeto y otra la ruta. Te vale únicamente con la variable myImage, asignándole la ruta de la imagen y luego añadiendo ese elemento al DOM en vez de la variable imagen.

Para poder desplazarse por las imágenes hace falta capturar el evento de teclado. Te pongo la solución a la parte correspondiente de código que tienes para mostrar imágenes.

        <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);
        myImage.src = 'img/1.png';
        var br = document.createElement("br");
        br.innerHTML = "<br>";
        document.body.appendChild(br);
        document.body.appendChild(myImage);
        
    };
</script>
1
  • gracias por la respuesta @Miguel27, es lo que estaba buscando, ahora intentaré capturar los eventos en dichas imágenes. el 19 ene. 2021 a las 11:37
1

Cuando creas la variable myImage ya estás creando el elemento "img" y tu lo que haces es crear el elemento "img" con el New Image(100,200) y luego intentar generar otro elemento "img" con el elemento ya creado myImage y no hace falta.

Te adjunto un link: https://developer.mozilla.org/es/docs/Web/API/HTMLImageElement/Image

<!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);
            myImage.src = 'img/1.png';
            var br = document.createElement("br");
            br.innerHTML = "<br>";
            document.body.appendChild(br);
            document.body.appendChild(myImage);
            
        };
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.