Add two elements of a dropdown in javascript

Question

Add two elements of a dropdown in javascript

Navigation

#1 by (0 votes)

1

I have two lists (select) with different values. I would like the user to choose a value from each list and that by pressing a button the program will show the result of the sum. Here is what I have done so far. :)

// 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>

javascript select

asked by Joan Subirats Llaveria 20.06.2017 в 15:53

source

1 answer

Problem with data upload Dropdownlist How to add a background image to a Hbox in javafx [closed]

score 0 · Accepted Answer

You only have to obtain each value selected by means of the attribute value , convert them to number (since they are string) and then add them.

// 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>