Autor Tema: JavaScript cambios dinámicos en formulario texto getElementsByTagName CU01128E  (Leído 1396 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Traigo el ejercicio CU01128E resuelto del curso de programación JavaScript básico.

Citar
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.

Citar
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:.

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;
            }
        </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>
« Última modificación: 23 de Septiembre 2020, 19:23 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Buenas, el ejercicio está correctamente resuelto. En el hilo https://aprenderaprogramar.com/foros/index.php?topic=3269.0 pueden verse algunos comentarios de interés. 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".