Autor Tema: JavaScript Acceso a nodos por etiqueta getElementsByTagName label CU01128E  (Leído 1857 veces)

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
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.

Código: [Seleccionar]
<!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>
« Última modificación: 14 de Junio 2017, 19:41 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".