Hola. Dejo la soluciòn al ejercicio CU01128E del tutorial pdf de programación JavaScript.
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?
No. Porque en algunos casos solo hay dos elementos o uno.¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?
Se ignoranModifica 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;}
.Idioma{border: solid 2px Goldenrod ;
border-radius:25px;
background-color:Peru;
float: left;
margin: 5px;
box-shadow:5px 5px 10px 2.5px;}
.Idioma:hover{background-color:BurlyWood;
box-shadow:5px 5px 10px 5px grey;}
</style>
<script type="text/javascript">
function cambiarAspecto(etiqueta) {
var elementosObtenidos = document.getElementsByTagName(etiqueta);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}
function cambiarIdioma(elemento)
{
var Espa=["Nombre :","Apellidos :","Correo Electronico :"];
var Ingl=['Name :','Surname :','E-mail :'];
var i;
var etiqueObtenidos=document.getElementsByTagName('label');
var H3Obtenidos=document.getElementsByTagName('h3');
var divObtenidos=document.getElementsByTagName('div');
if(elemento == 'ingles')
{
H3Obtenidos[0].firstChild.nodeValue="Traducir"
divObtenidos[2].firstChild.nodeValue="-Ingles-"
divObtenidos[3].firstChild.nodeValue="-Español-"
for (i=0; i<=2;i++)
{
etiqueObtenidos[i].firstChild.firstChild.nodeValue=Ingl[i];
}
}
if(elemento == 'español')
{
H3Obtenidos[0].firstChild.nodeValue="Translate"
divObtenidos[2].firstChild.nodeValue="-English-"
divObtenidos[3].firstChild.nodeValue="-Spanish-"
for (i=0; i<=2;i++)
{
etiqueObtenidos[i].firstChild.firstChild.nodeValue=Espa[i];
}
}
}
</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>
<h3>Translate</h3>
<div class="Idioma" onclick="cambiarIdioma('ingles')">-English-</div>
<div class="Idioma" onclick="cambiarIdioma('español')">-Spanish-</div>
</form>
</div>
</body>
Tema: JavaScript botón de traducción página web cambio de idioma al pulsar CU01128E (Leído 7947 veces)
RSS -
WAP2