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: Pepote21 en 01 de Mayo 2017, 21:42
-
Hola a todos. Os dejo mi código para el ejercicio CU01128E del tutorial de programación web como si estuvieras en primero.
Gracias
Un saludo.
¿Se usan los tres índices del array en todos los casos? NO
¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html? Si hay más índices que elementos, los que haya de más no se utilizarán.
<!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;}
#ingles, #espanol {padding:15px; width: 150px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#ingles:hover, #espanol:hover {background: rgb(66, 184, 221);}
</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 cambiarAIngles(elemento1){
var elementosObtenidos1=document.getElementsByTagName(elemento1);
elementosObtenidos1[0].firstChild.nodeValue='Name: ';
elementosObtenidos1[1].firstChild.nodeValue='Surname: ';
elementosObtenidos1[2].firstChild.nodeValue='e-mail: ';
}
function cambiarAEspanol(elemento2){
var elementosObtenidos2=document.getElementsByTagName(elemento2);
elementosObtenidos2[0].firstChild.nodeValue='Nombre: ';
elementosObtenidos2[1].firstChild.nodeValue='Apellidos: ';
elementosObtenidos2[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" 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 id="ingles" onclick="cambiarAIngles('span')">Cambiar a Inglés</div>
<div id="espanol" onclick="cambiarAEspanol('span')">Cambiar a Español</div>
</body>
</html>
-
Buenas Pepote21, respuestas bien y el código funciona bien; creo que hay un aspecto donde no estás cumpliendo con lo que pedía el enunciado del ejercicio. El ejercicio pedía "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:."
Por lo que veo en tu respuesta estás usando cambiarAIngles('span') de modo que no estás accediendo al nodo label, sino al nodo span
Salu2