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

pedro,, · « **en:** 30 de Septiembre 2015, 01:08 »

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.

Ogramar · « **Respuesta #1 en:** 02 de Octubre 2015, 08:43 »

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

pedro,, · « **Respuesta #2 en:** 02 de Octubre 2015, 22:46 »

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 · « **Respuesta #3 en:** 03 de Octubre 2015, 11:11 »

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,, · « **Respuesta #4 en:** 03 de Octubre 2015, 14:50 »

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 · « **Respuesta #5 en:** 03 de Junio 2016, 19:04 »

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

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

Noticias:

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

pedro,,

getElementsByTagName Cambiar estilos CSS de nodos con click Ejercicio CU01128E#

Ogramar

Re:getElementsByTagName. Cambiar estilos CSS de nodos con click Ejercicio(CU01128E)

pedro,,

Re:getElementsByTagName. Cambiar estilos CSS de nodos con click Ejercicio(CU01128E)

Ogramar

Re:getElementsByTagName. Cambiar estilos CSS de nodos con click Ejercicio(CU01128E)

pedro,,

Re:getElementsByTagName. Cambiar estilos CSS de nodos con click Ejercicio(CU01128E)

Salvadoruve2

Re:getElementsByTagName. Cambiar estilos CSS de nodos con click Ejercicio(CU01128E)

Preguntas y respuestas