Autor Tema: JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial (Leído 4180 veces)

SOLEARES · « **en:** 15 de Mayo 2015, 18:02 »

Hola,

Estas son mi respuestas a este ejercicio:

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 se utiliza 2 índices del array para la opción "div" y 1 para las opciones "h1" y "h2".
Para la opción "input" si que se utilizan los tres índices del array.
Cuando hay más índices de los que existen en el documento html, solo se utilizan los necesarios, los primeros que hay en el array hasta completar los que se necesitan.

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

Mi código es el siguiente:

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

</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 traducirAIngles(etiqueta){
	var etiquetasObtenidas = document.getElementsByTagName(etiqueta);
	etiquetasObtenidas[0].firstChild.firstChild.nodeValue = 'Name';
	etiquetasObtenidas[1].firstChild.firstChild.nodeValue = 'Surname';
	etiquetasObtenidas[2].firstChild.firstChild.nodeValue = 'E-mail';
}

function traducirAEspanyol(etiqueta) {
	var etiquetasObtenidas = document.getElementsByTagName(etiqueta);
	etiquetasObtenidas[0].firstChild.firstChild.nodeValue = 'Nombre';
	etiquetasObtenidas[1].firstChild.firstChild.nodeValue = 'Apellidos';
	etiquetasObtenidas[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>
</form>
<p/>
<div>
	<button type="text" id="ingles" onclick="traducirAIngles('label')">Cambiar a Inglés</button>
</div>
<p>
<div>
	<button type="text" id="espanyol" onclick="traducirAEspanyol('label')">Cambiar a Español</button>

</div>

</div>

</body>
</html>

Los botones los he hecho con "button" en lugar de hacerlos con "label". Espero que sea igualmente válido. De hecho a mi me funciona.

Saludos,

Ogramar · « **Respuesta #1 en:** 15 de Mayo 2015, 20:25 »

Hola con div sí creo que se utilizan todos los índices del array, si pruebo esto:

function cambiarAspecto(elemento) {

var elementosObtenidos = document.getElementsByTagName(elemento);
alert ('Tenemos una cantidad de elementos: '+elementosObtenidos.length);

Me sale que hay 4 elementos

¿Por qué dices que solo se usan 2 índices con div?

SOLEARES · « **Respuesta #2 en:** 15 de Mayo 2015, 21:26 »

Hola Ogramarm

Tienes razón. Yo hice la prueba antes de modificar el código, es decir, con el código original.

Al modificar yo mi código y añadir dos "div" para los nuevos botones, entonces hay cuatro. Pero como solo tenemos tres índices en el array, solo cambia el color a los tres primeros "div" el cuarto, que correspondería al botón "Cambiar a Español" , se quedaría sin cambiar.

Saludos,

Ogramar · « **Respuesta #3 en:** 16 de Mayo 2015, 21:50 »

ok. El resto bien!

Salu2

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

Noticias:

Autor Tema: JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial (Leído 4180 veces)

SOLEARES

JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial

Ogramar

Re:JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial

SOLEARES

Re:JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial

Ogramar

Re:JavaScript ejemplo getElementsByTagName ejercicio resuelto CU01128E del tutorial

Preguntas y respuestas