Autor Tema: getElementsByTagName Cambiar estilos CSS de nodos con click Ejercicio CU01128E#  (Leído 4433 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Respuestas al ejercicio CU01128E del tutorial de programación web con JavaScript desde cero:

Citar
Modifica el código anterior para que en vez de pasarse como parámetro label pases como parámetro: div, input, h1 y h2. ¿Se usan los tres índices del array en todos los casos? ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?

No, solo con los input y los label, porque hay tres o mas etiquetas input o label.
Solo se ejecutan los tres que hay.

Citar
Modifica el código anterior para introducir div que simule un botón con el texto “Cambiar a Inglés” y otro div simulando un botón “Cambiar a español”. Al pulsar sobre el botón cambiar a inglés, debes acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrónico: y cambiar su nodeValue por Name:, Surname: y e-mail:.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
.boton{padding:20px ;width:180px; float:left; color:yellow; border-radius: 33px; background: blue; text-align:center;}
#cambiarEspanol:hover, #cambiarIngles:hover{background:red; cursor:pointer;}
</style>
<script type="text/javascript">
function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}
function cambioDeIdioma(idioma){
//var contenidoLabel1 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[3].childNodes[1].childNodes[0];
//var contenidoLabel2 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[0];
//var contenidoLabel3 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[7].childNodes[1].childNodes[0];
var elementoLabel = document.getElementsByTagName('label');
if (idioma=='ingles'){
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:'
elementoLabel[1].firstChild.nextSibling.firstChild.nodeValue = 'Surname:'
elementoLabel[2].firstChild.nextSibling.firstChild.nodeValue = 'e-mail:'
}else{
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Nombre:'
elementoLabel[1].firstChild.nextSibling.firstChild.nodeValue = 'Apellidos:'
elementoLabel[2].firstChild.nextSibling.firstChild.nodeValue = 'Correo electrónico:'
}
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
<label for="nombre">
<span>Nombre:</span>
<input id="nombre" type="text" name="nombre" />
</label>
<label for="apellidos">
<span>Apellidos:</span>
<input id="apellidos" type="text" name="apellidos" />
</label>
<label for="email">
<span>Correo electrónico:</span>
<input id="email" type="text" name="email" />
</label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>
<div>
<div class="boton" id="cambiarIngles" onclick="cambioDeIdioma('ingles')">Cambiar a inglés</div>
<div class="boton" id="cambiarEspanol" onclick="cambioDeIdioma('espanol')">Cambiar a español</div>
</div>
</body>
</html>

Espero vuestros comentarios.

Saludos.

« Última modificación: 29 de Octubre 2020, 18:11 por Alex Rodríguez »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Hola si hay más de tres elementos y sólo tenemos previsto el tratamiento de tres el resto no se verán afectados.

El código funciona bien. ¿Serías capaz de describir cómo sería el esquema que hace que la expresión elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:' funcione?

Me refiero a un esquema similar a los que aparecen en el curso, sólo a partir del nodo del label

Salu2
« Última modificación: 01 de Enero 2018, 20:20 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Esta sería la representación:



Y la explicación del código
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:'

firstChild corresponde al elemento hijo de label, situado más a la izquierda, que es Texto vacío.
nextSibling corresponde al elemento hermano mas próximo hacia la derecha de Texto vacío, que sería la etiqueta span.
firstChild corresponde al primer hijo de span.

Saludos.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Perfecta la explicación, el código era un poco complejo y a veces se pone código sin saber lo que significa pero este no es el caso. Con esto queda más que aclarado el ejercicio

Salu2!

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Gracias Ogramar.

Cuando empecé a intentar resolver el ejercicio vi que no me había quedado claro el tema, así que para poder entenderlo bien tuve que hacerme el árbol de nodo completo, de ahí que en el código tenga estas tres lineas con comentarios:

Código: [Seleccionar]
//var contenidoLabel1 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[3].childNodes[1].childNodes[0];
//var contenidoLabel2 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[0];
//var contenidoLabel3 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[7].childNodes[1].childNodes[0];


Saludos.

Salvadoruve2

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Genial la explicación.. la verdad es que no sabía como resolver el ejercicio y me ha quedado muy claro. No se me había ocurrido recurrir a la sentencia If else para hacer funcionar los botones...

Gracias pedro,,
Dt. Crane psychiatrist

 

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