Autor Tema: JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E (Leído 3812 veces)

jbodenser · « **en:** 28 de Noviembre 2015, 08:42 »

Cuando aparecen más índices que elementos realmente existen JavaScript simplemente los ignora.

El código modificado es este.

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-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; 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 cambiarIdioma (elemento2) {
			var elementosLabel = document.getElementsByTagName(elemento2);
			elementosLabel[0].childNodes[0].firstChild.nodeValue = 'name';
			elementosLabel[1].childNodes[0].firstChild.nodeValue = 'surname';
			elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail';			
		}
	</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>
		
			<div class="boton-idioma" id="ingles" onclick="cambiarIdioma('label');">Cambiar a ingles</div>
			<div class="boton-idioma" id="espanol">cambiar a español</div>
	</div>
</body>
</html>

Un saludo.

Ogramar · « **Respuesta #1 en:** 29 de Noviembre 2015, 21:38 »

Buenas jbodenser

Pregunta del ejercicio: ¿Se usan los tres índices del array en todos los casos? Respuesta: No, solo con los input y los label, porque hay tres o mas etiquetas input o label. En el resto de elementos no llega a haber tres etiquetas.

Pregunta del ejercicio: ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?
Como has indicado cuando aparecen más índices que elementos realmente existen JavaScript simplemente los ignora.

He probado tu código pero no me funciona bien. Cuando pulso "Cambiar a inglés" sí se cambia el texto de los elementos del formulario a inglés, pero cuando pulso "Cambiar a español" no vuelve a ponerse en español. Se entiende que si hay un botón "Cambiar a español" debe ser para que al pulsar sobre él se cambie el texto a español, si no no tendría ninguna utilidad disponer de ese botón

Salu2

jbodenser · « **Respuesta #2 en:** 29 de Noviembre 2015, 23:39 »

Hola, es verdad, es un código deficiente.

Con lo aprendido hasta ahora lo haría así:

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-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; 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 cambiarIdioma (elemento2) {
			var elementosLabel = document.getElementsByTagName(elemento2);
			elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Name:';
			elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Surname:';
			elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail:';	
		}

		function cambiarIdioma2 (elemento2) {
			var elementosLabel = document.getElementsByTagName(elemento2);
			elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Nombre:';
			elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Apellidos:';
			elementosLabel[2].childNodes[0].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>
		
			<div class="boton-idioma" id="ingles" onclick="cambiarIdioma('label');">Cambiar a ingles</div>
			<div class="boton-idioma" id="espanol" onclick="cambiarIdioma2('label');">Cambiar a español</div>
	</div>
	
	
</body>
</html>

Un saludo

Ogramar · « **Respuesta #3 en:** 30 de Noviembre 2015, 13:20 »

Buenas ahora bien!

En tu código pasas label como parámetro. Otra opción también válida sería no pasar el parámetro, quedaría como este código que es igual pero sin pasar parámetros:

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-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; cursor: pointer;}
	</style>
	<script type="text/javascript">
		function cambiarAspecto() {
			var elementosObtenidos = document.getElementsByTagName('label');
			elementosObtenidos[0].style.backgroundColor = '#FF6633';
			elementosObtenidos[1].style.backgroundColor = '#FF9933';
			elementosObtenidos[2].style.backgroundColor = '#FFCC33';
		}
		
		function cambiarIdioma () {
			var elementosLabel = document.getElementsByTagName('label');
			elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Name:';
			elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Surname:';
			elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail:';	
		}

		function cambiarIdioma2 () {
			var elementosLabel = document.getElementsByTagName('label');
			elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Nombre:';
			elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Apellidos:';
			elementosLabel[2].childNodes[0].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()">
			<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 class="boton-idioma" id="ingles" onclick="cambiarIdioma();">Cambiar a ingles</div>
			<div class="boton-idioma" id="espanol" onclick="cambiarIdioma2();">Cambiar a español</div>
	</div>
	
	
</body>
</html>

Salu2

jbodenser · « **Respuesta #4 en:** 30 de Noviembre 2015, 22:35 »

Gracias

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

Noticias:

Autor Tema: JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E (Leído 3812 veces)

jbodenser

JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E

Ogramar

Re:JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E

jbodenser

Re:JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E

Ogramar

Re:JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E

jbodenser

Re:JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E

Preguntas y respuestas