Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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.
<!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.
-
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
-
Hola, es verdad, es un código deficiente.
Con lo aprendido hasta ahora lo haría así:
<!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
-
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:
<!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
-
Gracias :)