Control SELECT

PROBLEMAS

  1. Confeccionar una página que muestre un objeto SELECT con distintos tipos de pizzas (Jamón y Queso, Muzzarella, Morrones). Al seleccionar una, mostrar en un objeto de tipo TEXT el precio de la misma.
  2. Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar:
    Procesador (Intel I3 - $400, Intel I5 $600, Intel I7 $800).
    Monitor (Samsung 20' - $250, Samsung 22' - $350, Samsung 26' - $550)
    Disco Duro(500 Gb - $300, 1 Tb - $440, 3 Tb - $500)
    Para cada característica indicamos string a mostrar (Ej. Intel I3) y el valor asociado a dicho string (Ej. 400).
    Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT.
  3. Confeccionar una página que permita seleccionar una pizza y la cantidad de unidades. Luego al presionar un botón calcular el importe a pagar.
    Utilizar un objeto de la clase SELECT para la selección de la pizza, pudiendo ser:
    Queso: $ 4.
    Jamón y queso: $ 6.
    Especial: $ 10.
    A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la clase TEXT mostrar el importe total a abonar.
  4. Confeccionar una página que permita tomar un examen múltiple choice. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al presionar un botón mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT)
Solución 
Problema 1.


<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        <p>Pizzas:</p>
        <p><select id="pizza" onChange="mostrarSeleccionPizza()">
                <option value="180">Jamon y Queso</option>
                <option value="150">Muzzarella</option>
                <option value="170">Morrones</option>
            </select></p>
        <p><input type="text" id="mensaje"></p>
    </form>

    <script>
        function mostrarSeleccionPizza() {
            document.getElementById('mensaje').value =
                document.getElementById('pizza').options[document.getElementById('pizza').selectedIndex].value;
        }
    </script>

</body>

</html>     



Problema 2.


<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        <p> Procesador:</p>
        <p><select id="procesador">
                <option value="400">Intel I3</option>
                <option value="600">Intel I5</option>
                <option value="800">Intel I7</option>
         </select></p>
        <p> Procesador:</p>
        <p><select id="monitor">
                <option value="250">Monitor Samsung 20'</option>
                <option value="350">Monitor Samsung 22'</option>
                <option value="550">Monitor Samsung 26'</option>
        </select></p>
        <p> Disco duro:</p>
        <p><select id="discoduro">
                <option value="300">Disco Duro 500 Gb</option>
                <option value="440">Disco Duro 1 Tb</option>
                <option value="500">Disco Duro 3 Tb</option>
           </select></p>
        <p><input type="button" value="Calcular Presupuesto" onClick="calcularPresupuesto()"></p>
        <p><input type="text" id="resultado"></p>
    </form>

    <script>
        function calcularPresupuesto() {
            let ele1 = document.getElementById('procesador')
            let precio1 = ele1.options[ele1.selectedIndex].value;
            let ele2 = document.getElementById('monitor')
            let precio2 = ele2.options[ele2.selectedIndex].value;
            let ele3 = document.getElementById('discoduro')
            let precio3 = ele3.options[ele3.selectedIndex].value;
            precio1 = parseInt(precio1);
            precio2 = parseInt(precio2);
            precio3 = parseInt(precio3);
            let suma = precio1 + precio2 + precio3;
            document.getElementById('resultado').value = suma;
        }
    </script>

</body>

</html>



Problema 3.


<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        <p>Como se dice rojo en ingles:</p>
        <p><select id="pregunta1">
            <option value="1">blue</option>
            <option value="2">green</option>
            <option value="3">red</option>
        </select></p>
        <p> Como se dice ventana en ingles:</p>
        <p><select id="pregunta2">
            <option value="1">window</option>
            <option value="2">door</option>
            <option value="3">bedroom</option>
        </select></p>
        <p> Como se dice gato en ingles:</p>
        <p><select id="pregunta3">
            <option value="1">dog</option>
            <option value="2">cat</option>
            <option value="3">lion</option>
        </select></p>
        <p> Como se dice hombre en ingles:</p>
        <p><select id="pregunta4">
            <option value="1">women</option>
            <option value="2">man</option>
            <option value="3">child</option>
        </select></p>
        <p><input type="button" value="Controlar" onClick="verificar()"></p>
    </form>

    <script>
        function verificar() {
            let correctas = 0;
            let ele1 = document.getElementById('pregunta1');
            let ele2 = document.getElementById('pregunta2');
            let ele3 = document.getElementById('pregunta3');
            let ele4 = document.getElementById('pregunta4');
            if (ele1.options[ele1.selectedIndex].value == 3) {
                correctas++;
            }
            if (ele2.options[ele2.selectedIndex].value == 1) {
                correctas++;
            }
            if (ele3.options[ele3.selectedIndex].value == 2) {
                correctas++;
            }
            if (ele4.options[ele4.selectedIndex].value == 2) {
                correctas++;
            }
            alert('Cantidad de respuestas correctas:' + correctas);
        }
    </script>

</body>

</html>


Retornar al menu