Autor Tema: JavaScript checkbox atributo checked ejempl getElementsByName ejercicio CU01130E  (Leído 760 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Propuesta de solución para el ejercicio CU01130E del tutorial pdf de programación JavaScript con ejercicios resueltos:

Citar
¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

Daría el mismo resultado porque .checked funciona como tipo booleano.

Citar
Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.

Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.


Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                background-color:white;
                font-family: sans-serif;
            }
            label {
                color: maroon;
                display:inline-block;
                padding:5px;
            }
        </style>
        <script type="text/javascript">
            function informarItemsElegidos(elemento){
                var animalesTotal = document.getElementsByName(elemento);
                var animalesElegidos = 0;

                if(animalesTotal[0].checked){
                    animalesElegidos += 1;
                }

                if(animalesTotal[1].checked){
                    animalesElegidos += 1;
                }

                if(animalesTotal[2].checked){
                    animalesElegidos += 1;
                }

                if(animalesTotal[3].checked){
                    animalesElegidos += 1;
                }
                alert('El número de animales elegidos es: ' + animalesElegidos + ' y el total es: ' + animalesTotal.length)
            }
        </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="" onsubmit="informarItemsElegidos('animal')">
                <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>
                <p>Elige los animales que te gusten:</p>
                <input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León</label>
                <input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre</label>
                <input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo</label>
                <input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </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>
    </body>
</html>

Otra solución sin utilizar if sería cambiar la variable animalesElegidos por esta:

Código: [Seleccionar]
var animalesElegidos = animalesTotal[0].checked + animalesTotal[1].checked + animalesTotal[2].checked + animalesTotal[3].checked;

Esto funcionaría porque el valor booleano de true vale 1 y el de false vale 0. Entonces las casillas que estén tildadas darán true y se sumarían.
« Última modificación: 23 de Septiembre 2020, 19:31 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, el ejercicio está bien resuelto. La forma propuesta sin usar if de calcular el número de animales elegidos es ingeniosa (un poco extraña, pero funciona y es ingeniosa, aunque no la recomendaría porque estamos sumando variables booleanas que aunque se traduzcan en valores numéricos resulta más difícil de entender para quien lea el código). 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".