I would like that when you select elements from the drop-down menu, in addition to obtaining the number in seconds, a certain information box will show some content.
One of the things I want to achieve is that the image in div photo-info is updated according to the selection.
I think I'm not going wrong, but when I change the option of the drop-down the image is not shown, and in the console I receive an error of undefined . (the images I have in local)
// Añadiendo los tipos de tea
//Escogiendo el elemento
var selectTea = document.getElementById('tea');
//Array
var teas = [
{
name: 'Earl Grey',
time: 180
},
{
name: 'Otro té',
time: 300
},
{
name: 'Último té',
time: 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].name;
//Añadiendo un valor al elemento (opt)
opt.value = teas[i].time;
// 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 = [
{
name: 'George Orwell',
time: -50,
photo: 'img/orwell.jpg'
},
{
name: 'Kerome',
time: 80,
photo: 'img/kerome.jpg'
},
{
name: 'Churchill',
time: 30,
photo: 'img/churchill.jpg'
}
];
//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].name;
//Añadiendo un valor al elemento (opt)
opt.value = people[i].time;
// Añadiendo opt al final del selector (sel)
selectPeople.appendChild(opt);
}
//Funcion sumar los tiempos, Number para convertir los string a numero y mostrar el resultado
function totalTime(p1, p2) {
return p1 + p2;
}
function mostrar() {
document.getElementById("resultadouu").innerHTML = totalTime(Number(selectTea.value), Number(selectPeople.value)) + " segundos";
}
//Mostrar imagen segun seleccion
function showphoto() {
var img = document.querySelector(".photo-info img");
img.src = this.photo;
}
document.querySelector("ho").onchange = showphoto;.wrapper {
background-color: white;
width: 95%;
height: 100%;
margin: auto;
padding: 10px;
}
body {
background-color: deepskyblue;
}
.title {
text-align: center;
color: black;
font-family: 'Roboto';
}
.tea {
width: 50%;
float: left;
text-align: center;
}
.likeho {
width: 50%;
float: left;
text-align: center;
}
.resultado {
text-align: center;
margin-top: 100px;
font-family: 'Roboto';
}
.desplegables {
height: 100px;
padding: 20px;
}
select {
font-size: 35px;
border: solid black 5px;
}
.photo-info img {
object-fit: cover;
width: 90px;
height: 90px;
border-radius: 50%;
}
.info-panel {
width: auto;
height: 200px;
padding: 40px;
border: dotted black 2px;
}
.photo-info {
width: 10%;
float: left;
}
.info-text {
width: 80%;
float: left;
margin-left: 10%;
}
#resultadouu {
height: 50px;
}<!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="desplegables">
<div class="tea">
<select id="tea" name="tea">
</select>
</div>
<div class="likeho">
<select id="ho" name="ho">
</select>
</div>
</div>
<div>
<h1 class="resultado">Resultado<br>
<button onclick="mostrar()">Muestra el tiempo en segundos</button>
<p id="resultadouu"></p>
</h1>
</div>
<div class="info-panel">
<div class="photo-info">
<img src='img/churchill.jpg'>
</div>
<div class="info-text">
<div class="britton-title">
<h1>George Orwell</h1>
</div>
<div class="britton-text">
Eric Arthur Blair, más conocido por el pseudónimo de George Orwell, fue un escritor y periodista británico, cuya obra lleva la marca de las experiencias personales vividas por el autor en tres etapas
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>