Traigo el ejercicio CU01128E resuelto del curso de programación JavaScript básico.
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?
Si hay más índices que elementos, los índices que sobren no se ejecutarán.
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:.
<!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;
}
</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(idioma){
var nombre = document.getElementsByTagName('span')[0].firstChild,
apellidos = document.getElementsByTagName('span')[1].firstChild,
email = document.getElementsByTagName('span')[2].firstChild;
if (idioma == 'ingles'){
nombre.nodeValue = 'Name: '
apellidos.nodeValue = 'Surname: ';
email.nodeValue = 'E-mail: ';
} else if (idioma == 'español') {
nombre.nodeValue = 'Nombre: '
apellidos.nodeValue = 'Apellidos: ';
email.nodeValue = 'Correo electrónico: ';
} else {}
}
</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>
<div>
<input type="button" value="Cambiar a inglés" onclick="cambiarIdioma('ingles')">
</div>
<div>
<input type="button" value="Cambiar a español" onclick="cambiarIdioma('español')">
</div>
</body>
</html>
Tema: JavaScript cambios dinámicos en formulario texto getElementsByTagName CU01128E (Leído 1680 veces)
RSS -
WAP2