0

es que he estado teniendo un problema con mi codigo, por el hecho de que busco hacer que algunos inputs desparescan/aparescan cuando yo de un numero en especifico por ejemplo, si yo quiero decir que tengo en "cantidad de notas" 3, quiero que me aparescan 3 inputs para ingresar las 3 notas y su boton en especifico, y asi, si quiero 4 pues que aparescan los 4 inputs y el boton especifico, pero nose como, alguien me puede ayudar? estaba pensando que en vez de usar un input para decir cuantas notas tengo podria usar botones pero ese ya es otro tema. Por cierto, el codigo sirve para sacar promedios. Gracias

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>
        PROMEDIOS
        </title>
    </head>
    <body>
        <h1>Cantidad de notas</h1>
            <input type="text" name="nNotas">
            <button onclick="subNotas()">listo</button>
        <h1>ingresa tus notas</h1>  
            <input type="text" placeholder="Nota #1" name="nota1"><br>
            <input type="text" placeholder="Nota #2" name="nota2">
            <br>
            <input type="text" placeholder="Nota #3" name="nota3">
            <br>
            <input type="text" placeholder="Nota #4" name="nota4">
            <br>
            <input type="text" placeholder="Nota #5" name="nota5"><br>
            <button onclick="sub()">2 Notas</button><br>
            <button onclick="sub2()">3 Notas</button><br>
            <button onclick="sub3()">4 Notas</button><br>
            <button onclick="sub4()">5 Notas</button><br>


            <label id="suma"></label>

        
<script>function subNotas(){
  nNotas = document.getElementsByName("nNotas")[0].value;

  if (nNotas == 2) {
    nota1=true;
    nota2=true;
  }

  else if (nNotas <=0) {
    alert ("error")
  }
    else if (nNotas >=6) {
    alert ("error")
  }

}

  function sub(){
    nota1 = document.getElementsByName("nota1")[0].value;
    nota2 = document.getElementsByName("nota2")[0].value;

    var total= Number(nota1) + Number(nota2);

   var pro1= total/2;
     document.querySelector("#suma").textContent = pro1;
     }
     function sub2(){
    nota1 = document.getElementsByName("nota1")[0].value;
    nota2 = document.getElementsByName("nota2")[0].value;
    nota3 = document.getElementsByName("nota3")[0].value;

    var total= Number(nota1) + Number(nota2) + Number(nota3);

   var pro2= total/3;
   document.querySelector("#suma").textContent = pro2;
   }
     function sub3(){
    nota1 = document.getElementsByName("nota1")[0].value;
    nota2 = document.getElementsByName("nota2")[0].value;
    nota3 = document.getElementsByName("nota3")[0].value;
    nota4 = document.getElementsByName("nota4")[0].value;

    var total= Number(nota1) + Number(nota2) + Number(nota3) + Number(nota4);

   var pro3= total/4;
   document.querySelector("#suma").textContent = pro3;
   }
     function sub4(){
    nota1 = document.getElementsByName("nota1")[0].value;
    nota2 = document.getElementsByName("nota2")[0].value;
    nota3 = document.getElementsByName("nota3")[0].value;
    nota4 = document.getElementsByName("nota4")[0].value;
    nota5 = document.getElementsByName("nota5")[0].value;

    var total= Number(nota1) + Number(nota2) + Number(nota3) + Number(nota4) + Number(nota5);

   var pro4= total/5;
   document.querySelector("#suma").textContent = pro4;
   }

</script>

    </body>
</html>

3 respuestas 3

0

Crear los inputs de esa forma es poco dinámico ya. a largo no es sostenible.

Lo que te recomiendo es tener un div vacío, en ese div, al presionar en el input de nNotas creas n número de input y guardas el valor de nNotas en una variable global. Después de eso solo iteras de acuerdo al nombre que tiene cada input.

Lo que quedaría de la siguiente forma.

var nNotas

function subNotas(){
  const div = document.getElementById('inputs');
  nNotas = document.getElementsByName("nNotas")[0].value;
  div.innerHTML = ''
  for(let i = 1; i <= nNotas; i++) {
    const input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('placeholder', 'Nota #' + i);
    input.setAttribute('name', 'nota' + i);
    div.append(input)
  }
}

function sub(){
    suma = 0
    for(let i = 1; i <= nNotas; i++) {
        const valueinput = document.getElementsByName("nota" + i)[0].value
        suma += parseInt(valueinput ? valueinput : 0);
    }
    nota1 = document.getElementsByName("nota1")[0].value;
    nota2 = document.getElementsByName("nota2")[0].value;

    document.querySelector("#suma").textContent = suma/nNotas;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>
        PROMEDIOS
        </title>
    </head>
    <body>
        <h1>Cantidad de notas</h1>
            <input type="text" name="nNotas">
            <button onclick="subNotas()">listo</button>
        <h1>ingresa tus notas</h1>
        <h2>Inputs</h2>
        <div id="inputs"></div>
       <button onclick="sub()">Calcular promedio</button><br>  
       <label id="suma"></label>

        
<script>
</script>

    </body>
</html>

1
  • WOW, era incluso mejor de lo que pensaba que podia ser, MUCHAS GRACIAS Commented el 13 oct. 2022 a las 4:19
0

Lo que haría es:

  1. Crear un botón para que agregar una o muchas nota, este botón llama a la función AgregarInput

  2. Las notas se agregan con un botón al lado, para removerlas

  3. Un botón para sacar el promedio

El código me parece claro, pero cualquier cosa me preguntas

const NotasTemplate =  document.getElementById("NotasTemplate");

function AgregarInput(){
  let divNotas = document.getElementById("Notas");
  const clone = NotasTemplate.content.cloneNode(true);
  
  divNotas.appendChild(clone);
  
}

function RemoverInput(boton){
  boton.parentNode.remove();
}

function Promediar(){
  let suma = 0;
  let cantidad=0;
  let divResultado =document.getElementById("Resultado"); document.querySelectorAll(".notas").forEach(n => 
    {
      if(n.value.trim() != ""){
         suma+= Number(n.value);
         cantidad++;
      }
      
   });
   if(cantidad>0){
      divResultado.innerText = suma /cantidad;
   }
   else{
      divResultado.innerText= 0;
   }
 
}
.fila{
  display:grid;
  grid-template-columns: 1fr 20px;
}
<button onclick="AgregarInput()">Agregar Nota</button>

<div id="Notas">
</div>
<button  onclick="Promediar()">Promediar</button>
<div id="Resultado"></div>

<template id="NotasTemplate">
   <div class="fila">
      <input type="number" class="notas" />
      <button  onclick="RemoverInput(this)">X</button>
   </div>
</template>

1
  • Tambien es una muy buena idea, solo faltaria una buena decoracion y queda perfecta, Muchas gracias Commented el 13 oct. 2022 a las 4:20
0

Esta seria mi propuesta de solución, a ver si te convence:

function subNotas() {
  nNotas = Number(document.getElementsByName("nNotas")[0].value);
  if (nNotas > 0 && nNotas <= 6) {
    listaNotas.innerHTML = ''
    suma.innerHTML = ''
    for (i = 0; i < nNotas; i++) {
      listaNotas.innerHTML += '<input type="text" placeholder="Nota #' + (i + 1) + '" name="nota' + (i + 1) + '"><br>'
    }
  } else {
    alert("Error. Solo se permite un número entre 1 y 5 incluidos")
  }
}

function sub() {
  numNotas = listaNotas.getElementsByTagName("input").length
  let total = 0
  for (i = 1; i < numNotas + 1; i++) {
    total += Number(document.getElementsByName("nota" + i)[0].value)
  }
  var pro1 = total / numNotas;
  document.querySelector("#suma").textContent = pro1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>
    PROMEDIOS
  </title>
</head>

<body>
  <h1>Cantidad de notas</h1>
  <input type="text" name="nNotas">
  <button onclick="subNotas()">listo</button>
  <h1>ingresa tus notas</h1>
  <div id="listaNotas"></div>
  <button onclick="sub()">Calcular promedio</button><br>
  <label id="suma"></label>
</body>

</html>

Explicación breve

Reducimos todas las funciones a solo un par de ellas, una para cada botón, donde la primera, subNotas(), nos va a generar tantos inputs como sean necesarios (entre 1 y 5), y la segunda, sub(), nos va a calcular la suma de todos los inputs generados en la primera función y que estarán contenidos en un nuevo div que he denominado listaNotas.

Luego, en cada función usamos bucles for clásicos para realizar los distintos propósitos de cada función.

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.