Autor Tema: getElementsByTagName JavaScript firstChild.nodeValue acceder nodos DOM CU01128E (Leído 4828 veces)

Dimitar Stefanov · « **en:** 02 de Febrero 2016, 19:17 »

Aquí hago la siguiente entre del ejercicio CU01128E del curso JavaScript desde cero.

Las respuestas del ejercicio están en el código como comentarios.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Curso JavaScript</title>
	<style type="text/css">
	body {
	background-color: white;
	font-family: sans-serif;
	}
	label {
	color: maroon;
	display: block;
	padding: 5px;
	}
	.cambiarLengua {
	border: solid; 
	float: left; 
	margin: 5px;
	cursor: pointer;
	}
	</style>
	<script type="text/javascript">
	function cambiarAspecto(elemento){
	var elementosObtenidos=document.getElementsByTagName(elemento);
	elementosObtenidos[0].firstChild.firstChild.nodeValue='Name:';
	elementosObtenidos[1].firstChild.firstChild.nodeValue='Surname:';
	elementosObtenidos[2].firstChild.firstChild.nodeValue='E-mail:';
	}
	function cambiar(elemento){
	var elementos=document.getElementsByTagName(elemento);
	elementos[0].firstChild.nodeValue='Nombre:';
	elementos[1].firstChild.nodeValue='Apellidos:';
	elementos[2].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"
	/>
	<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>
	<div class="cambiarLengua" onclick="cambiarAspecto('label')" >Cambiar a Inglés</div>
	<div class="cambiarLengua" onclick="cambiar('span')">Cambiar a Español</div>
</body>
</html>

<!-- Si pasaramos 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 el presente caso, para los que no hay etiquetas, simplemente no se usan. -->

<!-- El ejercicio pedía sólo que modificaramos el código con tal finialidad de cambiar el nodeValue a los etiquetas span a Inglés. En el código que propongo como solución del ejercicio también cambio a Español los nodeValue de los etiquetas span. -->

Gracias.

pedro,, · « **Respuesta #1 en:** 07 de Febrero 2016, 13:05 »

Hola dimiste.

En cuanto a la pregunta, bien.

En el código hay cosas que deberías cambiar, por ejemplo los nombres de las funciones, porque cambiarAspecto() y cambiar() no definen el cometido de cada función. Lo que se hace es cambiar idioma. También podrías dejarlo todo en la misma función.

En cuanto tu segundo comentario, no es que cambies los nodeValue de otros elementos, puesto que solo cambias los de las etiquetas span, en una de las funciones accedes desde la etiqueta label y en la otra accedes directamente desde la etiqueta span.

Saludos.

bermartinv · « **Respuesta #2 en:** 08 de Febrero 2016, 00:34 »

Funcionar, funciona apesar de los nombres de las funciones como dice Pedro.
Además las dos funciones se podían haber hecho en una y haber elegido una opción o otra con un condicional if.

Dimitar Stefanov · « **Respuesta #3 en:** 09 de Febrero 2016, 11:17 »

Buenas Pedro y bermartinv.

La verdad, que haciendo los ejercicios , de momento, me fijo sobre todo que la función funcione bien. Los nombres de las variables o el propio nombre de la función es cómo algo secundario (para mi). Con tal de que funcione la función y que cumpla con los requisitos de los ejercicios me doy por satisfecho. Pero sí, tomo nota de lo que me comentas e intentaré cuidar hasta el último detalla tanto el código como describir bien lo que hago en los nombres de las variables o los nombres de las funciones.

En cuestión de tu segunda alcaración, ¿no son dos elementos diferentes el "label" y el "span"?. Aunque el "span" es hijo de label, es otro elemento, ¿verdad?
De todas maneras, lo que quería decir en mi segundo comentario era que al hacer click en el bóton "Cambiar a Español" lo que hacía la función correspondiente era que cambiaba los nodeValue de span.

Sobre lo que me comentas tú, bermartinv, sí es así, lo podría haber hecho todo en la misma función con una condicional if. No sé si hago las cosas así, por partes, para que se entienda mejor, o quizás para que lo vea yo mismo mejor. O quizás por falta de experiencia. Cierto es, me falta práctica en los códigos, pero poco a poco creo que me perfeccionaré.

Gracias por los comentarios y por ayudarme a los dos participantes.

Saludos.

Dimitar Stefanov · « **Respuesta #4 en:** 09 de Febrero 2016, 13:43 »

Aquí dejo el código corregido tal y como sugieren Pedro y bermartinv.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Curso JavaScript</title>
	<style type="text/css">
	body {
	background-color: white;
	font-family: sans-serif;
	}
	label {
	color: maroon;
	display: block;
	padding: 5px;
	}
	.cambiarLengua {
	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"
	/>
	<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>
	<div class="cambiarLengua" onclick="cambiarAspecto('ingles')" >Cambiar a Inglés</div>
	<div class="cambiarLengua" onclick="cambiarAspecto('espanyol')">Cambiar a Español</div>
</body>
</html>

<!-- Si pasaramos 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 el presente caso, para los que no hay etiquetas, simplemente no se usan. -->

<!-- El ejercicio pedía sólo que modificaramos el código con tal finialidad de cambiar el nodeValue a los etiquetas span a Inglés. En el código que propongo como solución del ejercicio también cambio a Español los nodeValue de los etiquetas span. -->

Gracias por las sugerencias.

Como se puede ver, la función JavaScript está hecha con las condicionales if y sólo con un tipo de botón.

pedro,, · « **Respuesta #5 en:** 09 de Febrero 2016, 17:18 »

Hola.

Cita de: dimiste en 09 de Febrero 2016, 11:17

En cuestión de tu segunda alcaración, ¿no son dos elementos diferentes el "label" y el "span"?. Aunque el "span" es hijo de label, es otro elemento, ¿verdad?
De todas maneras, lo que quería decir en mi segundo comentario era que al hacer click en el bóton "Cambiar a Español" lo que hacía la función correspondiente era que cambiaba los nodeValue de span.

Tienes razón, cuando copié tu código la ultima linea se me cortaba en nodeValue, así que no había leído tu comentario entero bien.

En cuanto a lo de los nombres, seguiré insistiendo,, es algo que te vendrá bien para cuando el código sea mas largo y mas complicado.

Saludos.

Dimitar Stefanov · « **Respuesta #6 en:** 09 de Febrero 2016, 19:38 »

Duda solucionada, jejeje.

Y sobre las variables y sus nombres, no te puede decir que no es así, porque sí, tienes toda la razón del mundo. Debería de empezar a poner las cosas por sus nombres y no inventarme las variables sin ningún sentido:)

Saludos (y gracias por corregirme los ejercicios).

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

Noticias:

Autor Tema: getElementsByTagName JavaScript firstChild.nodeValue acceder nodos DOM CU01128E (Leído 4828 veces)

Dimitar Stefanov

getElementsByTagName JavaScript firstChild.nodeValue acceder nodos DOM CU01128E

pedro,,

Re:CU01128E getElementsByTagName JavaScript

bermartinv

Re:CU01128E getElementsByTagName JavaScript

Dimitar Stefanov

Re:CU01128E getElementsByTagName JavaScript

Dimitar Stefanov

Re:CU01128E getElementsByTagName JavaScript

pedro,,

Re:CU01128E getElementsByTagName JavaScript

Dimitar Stefanov

Re:CU01128E getElementsByTagName JavaScript

Preguntas y respuestas