Autor Tema: getElementsByTagName JavaScript. Cambiar estilos CSS de nodos dinámicos CU01128E (Leído 2270 veces)

Pandemia · « **en:** 02 de Enero 2017, 21:43 »

Buenas noches aquí dejo una posible solución al ejercicio CU01128E del tutorial de programación web con JavaScript...

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?

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

Orientación: tendrás que conocer la estructura del DOM para poder acceder a los nodos con el contenido texto que nos interesa, ya que estos nodos son descendientes de los nodos label.

Código: [Seleccionar]

<!DOCTYPE html>
<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;}
		.cambiarIdioma{border: solid; float: left; margin: 5px; cursor: pointer;}
		</style>
		<script type="text/javascript">
		function cambiarAspecto(elemento){
			var elementosObtenidos=document.getElementsByTagName('label');
			if(elemento == 'ingles'){
			elementosObtenidos[0].firstChild.firstChild.nodeValue='Name:';
			elementosObtenidos[1].firstChild.firstChild.nodeValue='Surname:';
			elementosObtenidos[2].firstChild.firstChild.nodeValue='E-mail:';
			}if(elemento == 'espanyol'){
			elementosObtenidos[0].firstChild.firstChild.nodeValue='Nombre:';
			elementosObtenidos[1].firstChild.firstChild.nodeValue='Apellidos:';
			elementosObtenidos[2].firstChild.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>
<!-- Formulario de contacto -->
<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>
	<div class="cambiarIdioma" onclick="cambiarAspecto('ingles')">ingles</div>
	<div class="cambiarIdioma" onclick="cambiarAspecto('espanyol')">Español</div>

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

Si pasamos como parámetros div, input, h1 y h2, en vez de label, en algunos casos no se usan los tres índices del array, porque no hay tres etiquetas h1, h2 o div. Si hay más índices que elementos, como en éste caso, para los que no hay etiquetas, simplemente no se usan.

pedro,, · « **Respuesta #1 en:** 03 de Enero 2017, 20:02 »

Buenas Pandemia.

El ejercicio funciona bien y la respuesta es correcta, lo único comentarte que sería bueno que usases nombres que identifiquen bien lo que representan, en este caso la función cambio de aspecto sería mas apropiado un nombre como cambioDeIdioma o algo parecido.

Saludos.

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

Noticias: