<!DOCTYPE html>
<html>
<head>
<title>Calcula area da piscina</title>
<style>
#DivRetangular {
display: block;
}
#DivRedonda {
display: none;
}
#DivOval {
display: none;
}
</style>
</head>
<body>
Calcular area de piscina:
<select id="piscinaSelect" onChange="mudaPiscina()">
<option value="retangular">Retangular ou Quadrada</option>
<option value="redonda">Redonda</option>
<option value="oval">Oval</option>
</select>
<br>
<br>
<table id="DivRetangular">
<tr>
<td>Comprimento(m):</td>
<td><input type="text" id="comprimento"></td>
</tr>
<tr>
<td>Largura(m):</td>
<td><input type="text" id="largura"></td>
</tr>
<tr>
<td>Profundidade Média(m):</td>
<td><input type="text" id="profundidade1"></td>
</tr>
<tr>
<td></td>
<td><button onClick="calcularRetangular()">Calcular</button></td>
</tr>
<tr>
<td>Volume(m³):</td>
<td id="volume1">Click em calcular para encontrar o volume</td>
</tr>
</table>
<table id="DivRedonda" display="none">
<tr>
<td>Diametro(m):</td>
<td><input type="text" id="diametro"></td>
</tr>
<tr>
<td>Profundidade Média(m):</td>
<td><input type="text" id="profundidade2"></td>
</tr>
<tr>
<td></td>
<td><button onClick="calcularRedonda()">Calcular</button></td>
</tr>
<tr>
<td>Volume(m³):</td>
<td id="volume2">Click em calcular para encontrar o volume</td>
</tr>
</table>
<table id="DivOval" display="none">
<tr>
<td>Diametro Maior(m):</td>
<td><input type="text" id="diametroMaior"></td>
</tr>
<tr>
<td>Diametro Menor(m):</td>
<td><input type="text" id="diametroMenor"></td>
</tr>
<tr>
<td>Profundidade Média(m):</td>
<td><input type="text" id="profundidade3"></td>
</tr>
<tr>
<td></td>
<td><button onClick="calcularOval()">Calcular</button></td>
</tr>
<tr>
<td>Volume(m³):</td>
<td id="volume3">Click em calcular para encontrar o volume</td>
</tr>
</table>
<script type="text/javascript">
function calcularRetangular()
{
var comprimento = document.getElementById("comprimento").value;
var largura = document.getElementById("largura").value;
var profundidade = document.getElementById("profundidade1").value;
var volume = comprimento*largura*profundidade;
document.getElementById("volume").innerHTML = volume;
}
function calcularRedonda()
{
var diametro = document.getElementById("diametro").value;
var profundidade = document.getElementById("profundidade2").value;
var volume = diametro*diametro*profundidade*0.785;
document.getElementById("volume2").innerHTML = volume;
}
function calcularOval()
{
var diametroMaior = document.getElementById("diametroMaior").value;
var diametroMenor = document.getElementById("diametroMenor").value;
var profundidade = document.getElementById("profundidade3").value;
var volume = diametroMaior*diametroMenor*profundidade*0.785;
document.getElementById("volume3").innerHTML = volume;
}
function mudaPiscina()
{
if(document.getElementById("piscinaSelect").value == "retangular")
{
document.getElementById("DivRetangular").style.display = 'block';
document.getElementById("DivRedonda").style.display = 'none';
document.getElementById("DivOval").style.display = 'none';
}
else if(document.getElementById("piscinaSelect").value == "redonda")
{
document.getElementById("DivRetangular").style.display = 'none';
document.getElementById("DivRedonda").style.display = 'block';
document.getElementById("DivOval").style.display = 'none';
}
else
{
document.getElementById("DivRetangular").style.display = 'none';
document.getElementById("DivRedonda").style.display = 'none';
document.getElementById("DivOval").style.display = 'block';
}
}
</script>
</body>
</html>