Autor Tema: JavaScript getElementById y cambiar imagen al pulsar botón if ejercicio CU01127E (Leído 5256 veces)

ARANTZA · « **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.

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.

Mario R. Rancel · « **Respuesta #1 en:** 02 de Diciembre 2014, 08:26 »

Hola Arantza.

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é.

Te respondo el por qué: cuando hacemos un movimiento adelante o atrás necesitamos "recordar" qué número de camiseta es el que se está mostrando en un momento dado.

Las variables declaradas dentro de funciones no tienen "memoria". Cada vez que entras a la función, se inician, pero no se acuerdan del valor que tenían anteriormente.

En cambio las variables declaradas fuera de la función sí tienen "memoria" (al menos mientras estemos en la misma página web).

Como necesitamos recordar los números de camiseta, no podemos declarar esto dentro de una función porque no sabríamos que camiseta es la que se estaba mostrando y a cuál tenemos que cambiar.

Esto se volverá a estudiar más adelante en el curso.

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.

Ver siguientes mensajes

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.

No veo el código de respuesta

Para poder comentarte los resultados necesito ver el código que estás usando, para poder ejecutarlo yo en mi ordenador y así poder ver qué es lo que ocurre con ese código...

Saludos

ARANTZA · « **Respuesta #2 en:** 03 de Diciembre 2014, 20:47 »

Hola Mario, el código para el punto 3. con los valores de src, alt y title definidos usando arrays, es el que he subido en el primer mensaje.

El punto 4. duplicando el body, no lo había subido. Es éste:

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>
<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>

Muchas gracias por tus comentarios

Mario R. Rancel · « **Respuesta #3 en:** 04 de Diciembre 2014, 12:08 »

Hola, ahora lo veo... perdona porque no me había dado cuenta de que el código correspondía al apartado 3. Para facilitar que podamos revisar y comentar los ejercicios es conveniente que los respondas por orden, poniendo el apartado que se va a responder y luego la respuesta. [Edición: se ha corregido]

Apartado 3 del ejercicio:

He revisado el código y cumples perfectamente con lo que pedía ese apartado del ejercicio. Como detalle, si quieres respetar la sintaxis camelcase deberías escribir valorSrc, valorAlt y valorTitle en lugar de valorsrc, valoralt y valortitle.

Apartado 4 del ejercicio: tienes razón en lo que indicas. Para comprobarlo, modifica el código de la primera copia del body y pon por ejemplo <img id="imgCarrusel_cambiada". Al hacerlo, debes comprobar que te modifica la segunda imagen.

La conclusión interesante de esto es que dos elementos no deben tener nunca el mismo id dentro de una página web para evitar problemas.

Saludos,

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript getElementById y cambiar imagen al pulsar botón if ejercicio CU01127E (Leído 5256 veces)

ARANTZA

JavaScript getElementById y cambiar imagen al pulsar botón if ejercicio CU01127E

Mario R. Rancel

Re:ejercicio CU01127E JavaScript getElementById y cambiar imagen al pulsar botón

ARANTZA

Re:ejercicio CU01127E JavaScript getElementById y cambiar imagen al pulsar botón

Mario R. Rancel

Re:ejercicio CU01127E JavaScript getElementById y cambiar imagen al pulsar botón

Preguntas y respuestas