Mostrar Mensajes
1
Aprender a programar desde cero / JavaScript getElementById y cambiar imagen al pulsar botón if ejercicio CU01127E
« en: 01 de Diciembre 2014, 21:14 »
Respuestas al ejercicio CU01127E del curso aprender JavaScript como si estuviera en primero. En el ejercicio CU01127E creo que he hecho bien el poner los atributos de la imagen en una Array.
Respuesta: Sí, comprobado que funciona.
Respuesta: Al sacar la línea var numeroImagenActual =9; de la función, una vez que desaparece la camiseta 9 ya no vuelve. Con adelante - atrás, sólo pasas de la 6 a la 11. Pues por muchas vueltas que le de, no tengo ni idea de por qué es esto así...
Respuesta:
Al duplicar las líneas del body, los botones de la camiseta de abajo sólo mueven a la de arriba. Las dos tienen el mismo id, por lo que creo que tendrían que moverse las dos con cualquiera de los botones. Así que si esto no pasa, supongo que es debido a que la función encuentra el primer elemento con el id solicitado y ya no sigue buscando, sino que ejecuta en él las instrucciones ignorando al que venga detrás.
Citar
1.Comprueba que el código anterior te permite cambiar la imagen que se muestra haciendo uso de los botones.
Respuesta: Sí, comprobado que funciona.
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é.
Respuesta: Al sacar la línea var numeroImagenActual =9; de la función, una vez que desaparece la camiseta 9 ya no vuelve. Con adelante - atrás, sólo pasas de la 6 a la 11. Pues por muchas vueltas que le de, no tengo ni idea de por qué es esto así...
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. Las asignaciones dentro de los if deberán hacer referencia a los elementos del array y el resultado de ejecución deberá ser el mismo que se obtenía con el código original.
Respuesta:
Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</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; var valoralt; var valortitle; valorsrc=[]; valoralt=[]; valortitle=[];
valorsrc[0]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
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_11_humor_informatico_foto.jpg';
valoralt[0]='Camiseta 9 aprenderaprogramar.com'; valoralt[1]='Camiseta 6 aprenderaprogramar.com';valoralt[2]= 'Camiseta 11 aprenderaprogramar.com';
valortitle[0]='Diálogo entre informáticos'; valortitle[1]= 'Desbordado por los números'; valortitle[2]='Estudiando programacion';
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[0];
document.getElementById('imgCarrusel').alt = valoralt[0];
document.getElementById('imgCarrusel').title = valortitle[0];
}
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];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorsrc[2];
document.getElementById('imgCarrusel').alt = valoralt[2];
document.getElementById('imgCarrusel').title = valortitle[2];
}
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?
Al duplicar las líneas del body, los botones de la camiseta de abajo sólo mueven a la de arriba. Las dos tienen el mismo id, por lo que creo que tendrían que moverse las dos con cualquiera de los botones. Así que si esto no pasa, supongo que es debido a que la función encuentra el primer elemento con el id solicitado y ya no sigue buscando, sino que ejecuta en él las instrucciones ignorando al que venga detrás.
RSS