1

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>

1 respuesta 1

2

Lo único que tendrías que hacer, es que dentro de la función volver() se ejecute un script que cambie el value de tus <input> a vacío.

Para ello cree una función que busca todo los elementos de la etiqueta <input> (podrías seleccionarlos por una clase que les pusieras, sería mejor para evitar seleccionar <input> que no te interesen) e igualar su value a cadena vacía y la llamo al final de la función volver().

Para ello puedes usar un bucle for para iterar la colección que te devuelve el getElementsByTagName (existen otros métodos pero creo que que con este lo verás con mayor claridad).

Con los <h1> sería lo mismo nada más que al tratarse de un texto en vez de un <input> podrias vaciar su contenido a través de innerHTML.

//:::::::::::::::::::::::::::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";
    
    limpiar_campos();
  }
  
//::::::::::::::::::::::::::LIMPIAR CAMPOS:::::::::::::::::::::::::::::::::::::::::::
function limpiar_campos() {
  let inputs = document.getElementsByTagName('input');
  let resultados = document.getElementsByTagName('h1');
  
  for(let i = 0; i < inputs.length; i++) {
    inputs[i].value = '';
  }
  
  for(let i = 0; i < resultados.length; i++) {
    resultados[i].innerHTML = '';
  }
}

//::::::::::::::::::::::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>

2
  • Disculpa mi ignorancia, me podrías explicar para qué pones i++? Commented el 24 oct. 2019 a las 15:04
  • 1
    ¡Claro! Se trata de la manera más corriente de controlar el número de iteraciones que va a tener un bucle for. En for(let i = 0; i < inputs.length; i++) estás diciendo que se inicialice la variable i a valor 0, luego se indica que el bucle va a iterar tantas veces como la longitud que tenga la colección (en nuestro caso tantas veces como <input> tengamos) y por último el i++ incrementa la variable en 1 para que en la siguiente iteración pase a valer 1 en vez de cero, en la segunda 2 en vez de 1 y así sucesivamente.
    – phpMyGuel
    Commented el 24 oct. 2019 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.