Acá está el ejercicio CU01127E del curso de JavaScript para principiantes.
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).
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.
<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>
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: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).
Tema: Curso JavaScript getElementById Cambiar imagen img src url Ejercicio CU01127E (Leído 2449 veces)
RSS -
WAP2