Autor Tema: Curso JavaScript getElementById Cambiar imagen img src url Ejercicio CU01127E  (Leído 2451 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Acá está el ejercicio CU01127E del curso de JavaScript para principiantes.

Citar
2. En el código anterior hay una declaración de variables (var numeroImagenActual =9;) que no está dentro de una función. ¿Por qué crees que se ha hecho esto así? Prueba a colocarla dentro de la función, comprueba qué ocurre y razona el por qué.

En este caso, lo que entiendo es que numeroImagenActual es una variable de tipo global, declarada (obviamente) fuera de la función, entonces cuando la función se ejecuta, el valor inicial de la variable numeroImagenActual va a ser igual a 9. Pero una vez ocurran las acciones de movimiento "Atras" o "Adelante", la variable numeroImagenActual va a ir modificando su valor con respecto al valor de valorNuevoNumeroImagen que está dentro de cada if.
Entonces si pusieramos la variable global numeroImagenActual dentro de la función, tendremos como resultado que valorNuevoNumeroImagen siempre será 9, y al presionar "Atras" o "Adelante" pasaremos de la imagen 6 a la 11 o viceversa sin poder ver la imagen 9 (solamente cuando carga la página).

Citar
3. Modifica el código anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la función.

Código: [Seleccionar]
<html>
    <head>
        <title>Ejercicio CU01127E</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                text-align: center;
                font-family: sans-serif;
            }
            div {
                margin: 20px;
            }
            #contenedor {
                width: 405px;
                margin: auto;
            }
            #adelante, #atras {
                padding: 15px;
                width: 130px;
                float: left;
                color: white;
                border-radius: 40px;
                background: rgb(202, 60, 60);
            }
            #adelante:hover, #atras:hover {
                background: rgb(66, 184, 221);
            }
        </style>
        <script type="text/javascript">
            var numeroImagenActual = 9;
            function moverImagen(movimiento) {

                var valorSrc = [], valorTitle = [], valorAlt = [];
                valorSrc[1] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
                valorSrc[2] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
                valorSrc[3] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
                valorTitle[1] = 'Desbordado por los números';
                valorTitle[2] = 'Diálogo entre informáticos';
                valorTitle[3] = 'Estudiando programacion';
                valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
                valorAlt[2] = 'Camiseta 9 aprenderaprogramar.com';
                valorAlt[3] = 'Camiseta 11 aprenderaprogramar.com';

                if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
                    alert ('No es posible hacer ese movimiento');
                   
                } if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
                    valorNuevoNumeroImagen = 9;
                    document.getElementById('imgCarrusel').src = valorSrc[2];
                    document.getElementById('imgCarrusel').alt = valorAlt[2];
                    document.getElementById('imgCarrusel').title = valorTitle[2];

                } if (numeroImagenActual == 9 && movimiento == 'atras') {
                    valorNuevoNumeroImagen = 6;
                    document.getElementById('imgCarrusel').src = valorSrc[1];
                    document.getElementById('imgCarrusel').alt = valorAlt[1];
                    document.getElementById('imgCarrusel').title = valorTitle[1];

                } if (numeroImagenActual == 9 && movimiento == 'adelante') {
                    valorNuevoNumeroImagen = 11;
                    document.getElementById('imgCarrusel').src = valorSrc[3];
                    document.getElementById('imgCarrusel').alt = valorAlt[3];
                    document.getElementById('imgCarrusel').title = valorTitle[3];
                }
                numeroImagenActual = valorNuevoNumeroImagen;
                document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
            }
        </script>
    </head>
    <body>
        <div >
            <p>Pulsa adelante o atrás</p> 
            <h1 id="numeracion">Camiseta 9</h1>
            <img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
            <div id="contenedor">
                <div id ="atras" onclick="moverImagen('atras')"><<< Atrás</div>
                <div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
            </div>
        </div>
    </body>
</html>

Citar
4. Duplica todo el código HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. Cuando pulsas el botón situado debajo de la imagen inferior, ¿qué ocurre? ¿Por qué ocurre esto?

Lo que sucede es que tenemos dos ID con el mismo nombre. Lo que da como resultado que se ejecute solo el primer ID.

Cita de "GET ELEMENT BY ID" de la entrega N° 27:

Citar
Recordar que en un documento HTML no debería existir más de un elemento con un mismo id. Es decir, los ids deben ser únicos (identificadores únicos de un elemento). En caso de tener dos elementos dentro de nuestro documento HTML que tengan el mismo id, pueden surgir errores (seguramente JavaScript devuelva el primer elemento con el id especificado que encuentre, pero no deberíamos trabajar teniendo ids repetidos porque esto es incorrecto).
« Última modificación: 04 de Mayo 2020, 17:55 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Buenas, el ejercicio está bien resuelto.

Apartado 1. Consistía en probar el código del curso.

Apartado 2. Tal como indicas, la cuestión es que si la variable es global funciona de una manera y si es local funciona de otra.

Apartado 3. Está bien resuelto. Como sugerencia, es bueno acostumbrarse a usar como índice inicial de los arrays el cero. Así es como se hace en general en programación.

Apartado 4. Bien respondido

En este hilo puede verse el uso de los arrays con índice cero, y distintas formas de declarar los arrays: https://aprenderaprogramar.com/foros/index.php?topic=3264.0

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".