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

cristiannd · « **en:** 18 de Abril 2020, 03:22 »

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.

Ogramar · « **Respuesta #1 en:** 23 de Septiembre 2020, 19:36 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: