estoy haciendo un proyecto y no sé como se limpian los espacios de un input y de una etiqueta h1, necesito que se limpien al presionar el botón de volver. Se limpia pero cuando se vuelve a ingresar a la opción en la cual se realizó una operación el resultado de esa operación se sigue mostrando en la página, lo que quiero es que cuando le de al botón de volver pueda seleccionar otra vez la misma opción pero con la pantalla ya limpia para poder hacer otra operación. No sería nada más, muchas gracias de antemano, me han ayudado mucho con este proyecto...
//:::::::::::::::::::::::::::INICIO C1::::::::::::::::::::::::::::::::::
function inicio_1(){
document.getElementById("C2").style.display="inline";
document.getElementById("inicio1").style.display="none";
document.getElementById("volver").style.display="inline";
}
//::::::::::::::::::::::::::::INICIO Di::::::::::::::::::::::::::::::::::::
function inicio_2(){
document.getElementById("D1").style.display="inline";
document.getElementById("inicio1").style.display="none";
document.getElementById("volver").style.display="inline";
}
//::::::::::::::::::::::::::::INICIO P1::::::::::::::::::::::::::::::::::::::::::
function inicio_3(){
document.getElementById("P1").style.display="inline";
document.getElementById("inicio1").style.display="none";
document.getElementById("volver").style.display="inline";
}
//::::::::::::::::::::::::::BOTÓN VOLVER:::::::::::::::::::::::::::::::::::::::::::
function volver(){
document.getElementById("inicio1").style.display="inline";
document.getElementById("D1").style.display="none";
document.getElementById("P1").style.display="none";
document.getElementById("C2").style.display="none";
document.getElementById("volver").style.display="none";
document.getElementById("C_0").style.display="none";
document.getElementById("C_1").style.display="none";
}
//::::::::::::::::::::::OBTENER VALORES DE LA LISTA:::::::::::::::::::::::::
let n1=document.getElementById("n1");
let button=document.getElementById("button");
function hola1(){
let obtenern1= n1.value;
let convertir=Number(obtenern1);
//::::::::::::::::::::::OBTENER VALOR INGRESADO POR USUARIO QI::::::::::::::::::::::::::::::
let contenido = document.getElementById("texto")
let vector = [];
let cambiados = [];
let valor = contenido.value.split(",")
let nuevoVector = valor.forEach((elemento) => {
cambiados.push(Number(elemento))
});
let ordenado = cambiados.sort((x, y) => {
return x - y
})
let conteo_lista=cambiados.length;
//:::::::::::::::::::PROCESO DE OPERACIONES::::::::::::::::::::::::::::::::::::::
let sumar_0=conteo_lista+1;
let Qi_Di_Pi=convertir;
//:::::::::::::::::::::::::ECUACIONES DE CUANTILES::::::::::::::::::::::::::::
let ecuacion_C=sumar_0*Qi_Di_Pi/4;
let aproximacion_C= Math.round(ecuacion_C);
let tomarvalores_C0= ordenado[aproximacion_C-1];
let tomarvalores_C1= ordenado[aproximacion_C-2];
let resultado_C=tomarvalores_C1+tomarvalores_C0;
resultado_C=resultado_C/2;
//::::::::::::::::::::::IMPRIMIR RESULTADOS::::::::::::::::::::::::
document.getElementById("total").innerHTML="Lista ordenada:<br>"+ordenado+"<br>El resultado es:<br>"+ecuacion_C;
document.getElementById("C_0").style.display="inline";
document.getElementById("C_1").style.display="inline";
//::::::::::::::::::::::::SELECCIONAR NUMERO ENTERO O DECIMAL:::::::::::::::::::::::::::
let button1= document.getElementById("C_0");
button1.addEventListener("click", ()=>{
document.getElementById("total2").innerHTML="El resultado final es: "+tomarvalores_C0;
})
let button2= document.getElementById("C_1");
button2.addEventListener("click", ()=>{
document.getElementById("total2").innerHTML="El resultado final es: "+resultado_C;
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div id="inicio1">
<button class="inicio" id="Qi" onclick="inicio_1()">Qi</button>
<button class="inicio" id="Di" onclick="inicio_2()">Di</button>
<button class="inicio" id="Pi" onclick="inicio_3()">Pi</button>
</div>
<div id="C2">
<h4 class="C1">Qi:<input type="text" id="n1" class="C1"></h4>
<h4 class="C1">Lista:<input type="texto" id="texto" class="C1"></h4>
<button id="button" onclick="hola1();" class="C1">Resolver</button>
<h1 id="total"></h1>
<h1 id="total2"></h1>
</div>
<div id="D1">
<h4>Di:<input type="text" class="D2" id="n2"></h4>
<h4>Lista:<input type="text" class="D2" id="texto2"></h4>
<button id="button2" onclick="hola2()">Resolver</button>
<h1 id="total3"></h1>
<h1 id="total4"></h1>
</div>
<div id="P1">
<h4>Pi:<input type="text" class="P2"></h4>
<h4>Lista:<input type="text" class="P2"></h4>
<button class="button3" onclick="">Resolver</button>
</div>
<button onclick="" class="entero" id="C_0">Numero entero</button>
<button onclick="" class="decimal" id="C_1">Numero decimal</button>
<button id="volver" onclick="volver()">volver</button>
<script src="ju.js"></script>
</body>
</html>