1

Tengo dos listas (select) con distintos valores. Me gustaria que el usuario escoja un valor de cada lista y que al pulsar un botón el programa mostrase el resultado de la suma. Aqui va lo que tengo hecho hasta ahora. :)

// Añadiendo los tipos de tea

//Escogiendo el elemento
var selectTea = document.getElementById('tea');


//Array
var teas = [180, 300, 240]


//Loop
for (var i = 0; i < teas.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = teas[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = teas[i];

    // Añadiendo opt al final del selector (sel)
    selectTea.appendChild(opt);

}

// Añadiendo las personas

//Escogiendo el elemento
var selectPeople = document.getElementById('ho');


//Array
var people = [-50, +80, +30]


//Loop
for (var i = 0; i < people.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = people[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = people[i];

    // Añadiendo opt al final del selector (sel)
    selectPeople.appendChild(opt);

}
.wrapper {
    background-color: white;
    width: 100%;
    height: 100%;
    
}

body {
    background-color: ;
}

.title {
    
    text-align: center;
    color: black;
    font-family: 'Roboto';
    
}

.tea {
    width: 50%;
    float: left;
}

.likeho {
    width: 50%;
    float: left;
}

.resultado {
    text-align: center;
    margin-top: 100px;
    font-family: 'Roboto';
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,600" rel="stylesheet" type="text/css">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="style.css">

    <title>Teassistant</title>
</head>

<body>
    <div class="wrapper">


        <div class="title">
            <h1>Teassistant</h1>
        </div>

        <div class="tea">


            <select id="tea" name="tea">

            </select>

        </div>

        <div class="likeho">

            <select id="ho" name="ho">
  
            </select>


        </div>

        <div>

            <h1 class="resultado">Resultado en segundos <br>


                <input type="button" onClick="totalTime()" Value="Suma" />


            </h1>



        </div>



    </div>

    <script src="app.js"></script>
</body>

</html>

1 respuesta 1

0

Solo debes obtener cada valor seleccionado por medio del atributo value, convertirlos a número (ya que son string) y luego sumarlos.

// Añadiendo los tipos de tea

//Escogiendo el elemento
var selectTea = document.getElementById('tea');


//Array
var teas = [180, 300, 240]


//Loop
for (var i = 0; i < teas.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = teas[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = teas[i];

    // Añadiendo opt al final del selector (sel)
    selectTea.appendChild(opt);

}

// Añadiendo las personas

//Escogiendo el elemento
var selectPeople = document.getElementById('ho');


//Array
var people = [-50, +80, +30]


//Loop
for (var i = 0; i < people.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = people[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = people[i];

    // Añadiendo opt al final del selector (sel)
    selectPeople.appendChild(opt);

}

// esto te falta
function totalTime() {
  var tea = Number(selectTea.value);
  var peo = Number(selectPeople.value);
  alert(tea + peo);
}
.wrapper {
    background-color: white;
    width: 100%;
    height: 100%;
    
}

body {
    background-color: ;
}

.title {
    
    text-align: center;
    color: black;
    font-family: 'Roboto';
    
}

.tea {
    width: 50%;
    float: left;
}

.likeho {
    width: 50%;
    float: left;
}

.resultado {
    text-align: center;
    margin-top: 100px;
    font-family: 'Roboto';
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,600" rel="stylesheet" type="text/css">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="style.css">

    <title>Teassistant</title>
</head>

<body>
    <div class="wrapper">


        <div class="title">
            <h1>Teassistant</h1>
        </div>

        <div class="tea">


            <select id="tea" name="tea">

            </select>

        </div>

        <div class="likeho">

            <select id="ho" name="ho">
  
            </select>


        </div>

        <div>

            <h1 class="resultado">Resultado en segundos <br>


                <input type="button" onClick="totalTime()" Value="Suma" />


            </h1>



        </div>



    </div>

    <script src="app.js"></script>
</body>

</html>

6
  • Mil gracias Gustavo! ¿Es muy abusar hacerte otra pequeña pregunta? Commented el 20 jun. 2017 a las 14:10
  • Si está relacionada, pregunta aquí como comentario, si no lo está, mejor crea otra pregunta. Saludos.
    – gugadev
    Commented el 20 jun. 2017 a las 14:13
  • Es sobre el mismo ejercicio, pero va sobre arrays. Mejor hago otra! Gracias! Commented el 20 jun. 2017 a las 14:14
  • 1
    Hecho, pero como soy nuevo y tengo poca reputación dice que aun no me cuentan mis votos. :( Commented el 20 jun. 2017 a las 14:22
  • 1
    Hecho! Validada como buena. Muy amable! Commented el 20 jun. 2017 a las 14:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.