« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript: acceder a elementos por id. getElementById. Document.all. CU01127E  (Leído 2357 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
JavaScript: acceder a elementos por id. getElementById. Document.all. CU01127E
« en: 29 de Diciembre 2016, 20:44 »
Aquí dejo una posible solución a los ejercicios de la entrega CU01127E del tutorial básico de programación web con JavaScript

1.Comprueba que el código anterior te permite cambiar la imagen que se muestra haciendo uso de los botones.

La Cambia perfectamente.

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

var numeroImagenActual =9; es una variable global y se coloca hay para poder ejecutarla en cualquier parte del código, si la ponemos en una función solo se mostraría el número 9 en la camiseta y la dar a los botones no cambiarían.

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. Por ejemplo tendremos que:

Código: [Seleccionar]
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/ camiseta_6_humor_informatico_foto.jpg';
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.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curso JavaScript de aprenderaprogramar.com</title>

<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, valorAlt, valorTitle;
valorSrc=[];
valorAlt=[];
valorTitle=[];

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


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[1];
document.getElementById('imgCarrusel').alt = valorAlt[1];
document.getElementById('imgCarrusel').title = valorTitle[1];
}
if (numeroImagenActual == 9 && movimiento == 'atras'){
valorNuevoNumeroImagen = 6;

document.getElementById('imgCarrusel').src = valorSrc[0];
document.getElementById('imgCarrusel').alt = valorAlt[0];
document.getElementById('imgCarrusel').title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'adelante'){
var 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')"> <<< Atras </div>

<div id="adelante" onclick="moverImagen('adelante')"> Adelante >>></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?

Al duplicar el body del código lo que ocurre es que solo cambia la primera camiseta ya que al tener los dos el mismo id entran en conflicto y la función actúa sobre el primero que encuentra.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curso JavaScript de aprenderaprogramar.com</title>

<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, valorAlt, valorTitle;
valorSrc=[];
valorAlt=[];
valorTitle=[];

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


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[1];
document.getElementById('imgCarrusel').alt = valorAlt[1];
document.getElementById('imgCarrusel').title = valorTitle[1];
}
if (numeroImagenActual == 9 && movimiento == 'atras'){
valorNuevoNumeroImagen = 6;

document.getElementById('imgCarrusel').src = valorSrc[0];
document.getElementById('imgCarrusel').alt = valorAlt[0];
document.getElementById('imgCarrusel').title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'adelante'){
var 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')"> <<< Atras </div>

<div id="adelante" onclick="moverImagen('adelante')"> Adelante >>></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')"> <<< Atras </div>

<div id="adelante" onclick="moverImagen('adelante')"> Adelante >>></div>

</div>
</body>
</html>


Saludos y gracias de antemano..... :)
« Última modificación: 16 de Enero 2017, 19:58 por Ogramar »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01127E JavaScript: acceder a elementos por id. getElementById. Document.all.
« Respuesta #1 en: 03 de Enero 2017, 19:57 »
Hola Pandemia.

En el ejercicio 3, después de mostrar el alert, en la pantalla aparece "camisetaundefined" y después ya no funciona ninguno de los botones, lo mismo pasa en el código del cuarto apartado.

Saludos. ;D
En línea
Páginas: [1]
« anterior próximo »
 

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