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>