He creado un pequeño programa para que seleccionando una figura e introduciendo los datos pueda calcular el área. Pero al ejecutar la función que escribe sobre el HTML con .innerHtml aparece durante un momento el resultado y se va. Pasa lo mismo con la selección de la figura, ya que quiero que desaparezcan los campos que no son necesarios para calcular su área.
const pi = 3.14;
var resultado;
function area_cuadrado(l){
resultado=l*l;
var mostrarResultado = document.getElementById("mostrarResultado");
mostrarResultado.innerHTML="El área del cuadradp es de"+resultado+" m <sup>2</sup>";
}
function area_rectangulo(b,h){
resultado=b*h;
var mostrarResultado = document.getElementById("mostrarResultado");
mostrarResultado.innerHTML="El área del rectángulo es de"+resultado+" m <sup>2</sup>";
}
function area_circulo(r){
resultado=pi*(r**r);
var mostrarResultado = document.getElementById("mostrarResultado");
mostrarResultado.innerHTML="El área del círculo es de"+resultado+" m <sup>2</sup>";
}
function seleccionarFigura(){
var figura=document.getElementById("figura").value;
//Campos como objetos
var LADO=document.getElementById("lado");
var BASE=document.getElementById("base");
var ALTURA=document.getElementById("altura");
var RADIO=document.getElementById("radio");
switch(figura){
case "cuadrado":
BASE.style.display="none";
ALTURA.style.display="none";
RADIO.style.display="none";
break;
case "rectangulo":
RADIO.style.display="none";
LADO.style.display="none";
break;
case "circulo":
BASE.style.display="none";
ALTURA.style.display="none";
LADO.style.display="none";
break;
}
}
function obtenerDatos(){
//Recoger datos introducidos en los campos
var lado=parseInt(document.getElementById("lado").value);
var base=parseFloat(document.getElementById("base").value);
var altura=parseFloat(document.getElementById("altura").value);
var radio=parseFloat(document.getElementById("radio").value);
var figura=document.getElementById("figura").value;
//Determinar el caso y resolver operación
switch(figura){
case "cuadrado":
area_cuadrado(lado);
break;
case "rectangulo":
area_rectangulo(base, altura);
break;
case "circulo":
area_circulo(lado);
break;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CALCULADOR DE ÁREAS</title>
<meta name="title" content="Calculador de áreas">
<meta name="description" content="Calculadoras de áreas">
<script src="js/code.js"></script>
</head>
<body>
<form name="formulario" id="formulario">
<fieldset>
<h1>Calculador de áreas</h1>
<label for="Figura">Figura:</label>
<select name="figura" id="figura">
<option value="" disabled selected>Seleccione una figura...</option>
<option value="cuadrado">Cuadrado</option>
<option value="rectangulo">Rectángulo</option>
<option value="circulo">Círculo</option>
</select>
<button onclick="seleccionarFigura()">Establecer</button>
<br><br>
<fieldset>
<legend>Datos</legend>
<label for="lado">Lado:</label>
<input id="lado" name="lado" placeholder="Introduzca el lado" type="text">
<label for="base">Base:</label>
<input id="base" name="base" placeholder="Introduzca la base" type="text">
<label for="altura">Altura:</label>
<input id="altura" name=altura" placeholder="Introduzca la altura" type="text">
<label for="radio">Radio:</label>
<input id="radio" name="radio" placeholder="Introduzca el radio" type="text">
</fieldset>
<br><br>
<button type="submit" id="boton" onclick="obtenerDatos()">Resultado</button>
<br><br>
<fieldset>
<legend>Resultado</legend>
<p id="mostrarResultado"></p>
</fieldset>
</fieldset>
</form>
</body>
</html>