0

Este es todo mi codigo JS.

function procesarNotas() {
  var notas = [
    document.getElementById('alumno1-nota1').value,
    document.getElementById('alumno1-nota2').value,
    document.getElementById('alumno1-nota3').value,
    document.getElementById('alumno1-nota4').value
  ]

  var notas2 = [
    document.getElementById('alumno2-nota1').value,
    document.getElementById('alumno2-nota2').value,
    document.getElementById('alumno2-nota3').value,
    document.getElementById('alumno2-nota4').value
  ]

  var notas3 = [
    document.getElementById('alumno3-nota1').value,
    document.getElementById('alumno3-nota2').value,
    document.getElementById('alumno3-nota3').value,
    document.getElementById('alumno3-nota4').value
  ]

  var notas4 = [
    document.getElementById('alumno4-nota1').value,
    document.getElementById('alumno4-nota2').value,
    document.getElementById('alumno4-nota3').value,
    document.getElementById('alumno4-nota4').value
  ]

  var notasFinal = [notas, notas2, notas3, notas4]

  var promedio = (+notas[0] + +notas[1] + +notas[2] + +notas[3]) / 4
  var promedio2 = (+notas2[0] + +notas2[1] + +notas2[2] + +notas2[3]) / 4
  var promedio3 = (+notas3[0] + +notas3[1] + +notas3[2] + +notas3[3]) / 4
  var promedio4 = (+notas4[0] + +notas4[1] + +notas4[2] + +notas4[3]) / 4

  var parrafo = document.getElementById('mensaje')
  var parrafoP1 = document.getElementById('mensaje2')
  var parrafoP2 = document.getElementById('mensaje3')
  var parrafoP3 = document.getElementById('mensaje4')

  var parrafo2 = document.getElementById('mensajeC')
  var parrafo2C = document.getElementById('mensajeC2')
  var parrafo3C = document.getElementById('mensajeC3')
  var parrafo4C = document.getElementById('mensajeC4')

  parrafo.innerHTML = promedio
  parrafoP1.innerHTML = promedio2
  parrafoP2.innerHTML = promedio3
  parrafoP3.innerHTML = promedio4

  if (promedio >= 11) {
    parrafo2.style.color = 'Green'
    parrafo2.innerHTML = 'Aprobado'
  } else {
    parrafo2.style.color = 'Red'
    parrafo2.innerHTML = 'Desaprobado'
  }

  if (promedio2 >= 11) {
    parrafo2C.style.color = 'Green'
    parrafo2C.innerHTML = 'Aprobado'
  } else {
    parrafo2C.style.color = 'Red'
    parrafo2C.innerHTML = 'Desaprobado'
  }

  if (promedio3 >= 11) {
    parrafo3C.style.color = 'Green'
    parrafo3C.innerHTML = 'Aprobado'
  } else {
    parrafo3C.style.color = 'Red'
    parrafo3C.innerHTML = 'Desaprobado'
  }

  if (promedio4 >= 11) {
    parrafo4C.style.color = 'Green'
    parrafo4C.innerHTML = 'Aprobado'
  } else {
    parrafo4C.style.color = 'Red'
    parrafo4C.innerHTML = 'Desaprobado'
  }

  var nombresAprobados = [];
  var nombresDesaprobados = [];
  var lista1 = document.getElementById('listaA')
  var lista2 = document.getElementById('listaD')

  for (var i = 0; i < notasFinal.length; i++) {
    if (notasFinal[i] >= 11) {
      nombresAprobados = notasFinal[i]
      lista1.style.color = 'green'
      lista1.innerHTML = nombresAprobados
    } else {
      nombresDesaprobados = notasFinal[i]
      lista2.style.color = 'red'
      lista2.innerHTML = nombresDesaprobados
    }
  }
}
div {
  padding: 10px;
}

#alumno1 {
  display: inline-block;
}

#alumno1 input {
  display: flex;
  flex-direction: column;
  margin: 39px;
  height: 25px;
  width: 55px;
}

.alumno {
  display: inline-block;
}

#titulo1 {
  display: inline-block;
  margin-left: 20%;
}
<h1 align="center" style="font-size: 30px;">Ejercicio 2</h1>
<div class="alumno">
  <div>
    <p><strong>Nota 1</strong></p>
  </div>
  <div>
    <p><strong>Nota 2</strong></p>
  </div>
  <div>
    <p><strong>Nota 3</strong></p>
  </div>
  <div>
    <p><strong>Nota 4</strong></p>
  </div>
</div>
<div id="alumno1">
  <div id="titulo1">
    <p><strong>Alumno 1</strong></p>
  </div>
  <input type="text" id="alumno1-nota1">
  <input type="text" id="alumno1-nota2">
  <input type="text" id="alumno1-nota3">
  <input type="text" id="alumno1-nota4">
</div>
<div id="alumno1">
  <div id="titulo1">
    <p><strong>Alumno 2</strong></p>
  </div>
  <input type="text" id="alumno2-nota1">
  <input type="text" id="alumno2-nota2">
  <input type="text" id="alumno2-nota3">
  <input type="text" id="alumno2-nota4">
</div>
<div id="alumno1">
  <div id="titulo1">
    <p><strong>Alumno 3</strong></p>
  </div>
  <input type="text" id="alumno3-nota1">
  <input type="text" id="alumno3-nota2">
  <input type="text" id="alumno3-nota3">
  <input type="text" id="alumno3-nota4">
</div>
<div id="alumno1">
  <div id="titulo1">
    <p><strong>Alumno 4</strong></p>
  </div>
  <input type="text" id="alumno4-nota1">
  <input type="text" id="alumno4-nota2">
  <input type="text" id="alumno4-nota3">
  <input type="text" id="alumno4-nota4">
</div>
<p><strong>Promedio</strong></p>
<p id="mensaje"></p>
<p id="mensaje2"></p>
<p id="mensaje3"></p>
<p id="mensaje4"></p>
<br><br>
<p><strong>Condicion</strong></p>
<p id="mensajeC"></p>
<p id="mensajeC2"></p>
<p id="mensajeC3"></p>
<p id="mensajeC4"></p>
<p id="listaA"></p>
<p id="listaD"></p>
<h2 align="center"><input type="button" value="Procesar Notas" onclick="procesarNotas()"></h2>

El problema es la lista de alumnos aprobados y desaprobados. Desde el alumno 1 hasta el alumno 4, debería aparecer qué alumnos aprobaron y quienes no.

Una consulta más: ¿Cómo podría hacer para que el programa me muestre el promedio mientras voy tipeando las notas? No sabia cómo hacerlo, así que lo pasé a la función del botón. Agradecería bastante la ayuda con estos 2 problemas.

3
  • Lo de visualizar los alumnos aprobados y desaprobados veo que está ocurriendo. Lo de ver el promedio de notas mientras escribes, puedes capturar a tus inputs (donde escribes las notas) con var inputs = document.querySelectorAll('input[type="text"]');, luego los recorres y le añades un listener a cada uno, indicando que cada vez que escribas, llamas a la función procesarNotas(), así: inputs.forEach(function(input) { input.addEventListener('input', procesarNotas); }); Commented el 10 jul. 2023 a las 2:16
  • El problema es que deberia decir los nombres de los alumnos estan aprobados o desaprobados (alumno 1 2 3 o 4). Solo me dice si aprobaron o no, no quien desaprobó.
    – user333623
    Commented el 10 jul. 2023 a las 2:25
  • Ah, pues en tu if del for final, en vez de nombresAprobados = notasFinal[i] coloca nombresAprobados.push("Alumno " + (i + 1)); y en vez de lista1.innerHTML = nombresAprobados coloca lista1.innerHTML = nombresAprobados.join(', ');, lo mismo con el else pero con el array nombresDesaprobados y la variable lista2. Commented el 10 jul. 2023 a las 2:34

1 respuesta 1

0

Usa el evento change, que se ejecutara cada vez que un input cambie su valor y pierda el foco (El borde negro que aparece cada vez que estas escribiendo en el), podes aprovechar el mismo evento para mostrar si el alumno esta aprobado o no, pero tendrás que validar que los inputs de ese alumno tengan valores ya que no tiene sentido mostrar la condición del alumno cuando faltan notas.

Aclaración: he agregado algunas clases y quitado otras, mas que nada porque su nombre no correspondía con su función, además tenes ID's que se repiten, los ID's deben usarse para seleccionar un elemento único en el documento como un <footer> por ejemplo, para eso tenes las clases que son mucho mejores y se puede iterar sobre ellas como con un arreglo.

const alumnos = document.querySelectorAll('.alumno') // contenedor de alumnos
const promedios_output = document.querySelectorAll('.promedio_output') // salida de los promedios
const listaA = document.getElementById('listaA') // listas de condicion
const listaD = document.getElementById('listaD')

function crearCond(nombrealumno, condicion) { // esta funcion crea una entrada (elemento) para listaA o listaB, es mejor asi que usar innerHTML
  let contenedor = document.createElement('div')
  contenedor.setAttribute( 'id' ,`nombre_${nombrealumno}`)
  contenedor.appendChild(document.createTextNode(`${nombrealumno} `))
  let condicionspan = document.createElement('span')
  condicionspan.appendChild(document.createTextNode(`${condicion}`))
  condicionspan.classList.add(condicion === 'APROBADO' ? 'listaAEntrada' : 'listaDEntrada') // agrego una clase u otra dependiendo la condicion del alumno, esto pintara las entradas de azul o rojo
  contenedor.appendChild(condicionspan)
  return contenedor
}

alumnos.forEach((alumno, idx) => { // para cada alumno selecciono:

  let inputsAlumno = [...alumno.querySelectorAll('input')] // los inputs de sus notas
  let nombreAlumno = alumno.querySelector('div > p > strong').textContent // su nombre

  inputsAlumno.forEach(input => { // para cada input del alumno
    input.addEventListener('change', () => { // agrego el evento 'change', que ejecutara la funcion cada vez que un input cambie de valor
      let promedio = 0;
      // obtengo el promedio de todos los inputs del alumno
      promedio = inputsAlumno.reduce((acc, curr) => acc += parseInt(curr.value) || 0, 0) / inputsAlumno.length
        // muestro/actualizo el promedio
      promedios_output[idx].textContent = promedio 

      let existe = document.getElementById(`nombre_${nombreAlumno}`) // seleccionamos el elemento de la seccion 'condicion' (si existiese)
      if(inputsAlumno.every(elem => elem.value.trim() !== "")) { // solo en el caso de que los inputs del alumno no esten vacios
        let cond = crearCond(nombreAlumno, promedio >= 11 ? 'APROBADO' : 'DESAPROBADO') // creamos un nuevo elemento para la seccion 'condicion'

        if(!existe) { // si no existe (existe === null) insertamos el nuevo en la lista correspondiente
          if(promedio >= 11) listaA.appendChild(cond)
          else listaD.appendChild(cond)
        } 
        else if(!existe.isEqualNode(cond)) { // si existe comprobamos que no sean elementos equivalentes (para evitar reemplazos innecesarios)
          let padre = existe.parentNode // obtenemos el padre del elemento (la listaA o la listaD)
          padre.replaceChild(cond, existe) // reemplazamos el elemento antiguo por el nuevo
        } 
      } else existe && existe.parentNode.removeChild(existe)
    })  
  })
})
div{
  padding: 10px;
}
#alumno1 {
  display: inline-block;
}
#alumno1 input {
  display: flex ;
  flex-direction: column;
  margin: 39px;
  height: 25px;
  width: 55px;
}
#cabecera {
  display: inline-block;
}

#titulo1 {
  display: inline-block;
  margin-left: 20%;
}

#promedios {
  display: inline;
}

.listaAentrada {
  color: blue;
}

.listaDentrada {
  color: red;
}
<html>

<head>
  <title>Untitled-2</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet", href="estilos.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>

  <h1 align="center" style="font-size: 30px;">Ejercicio 2</h1>
  <div id="cabecera">
    <div>
      <p><strong>Nota 1</strong></p>
    </div>
    <div>
      <p><strong>Nota 2</strong></p>
    </div>
    <div>
      <p><strong>Nota 3</strong></p>
    </div>
    <div>
      <p><strong>Nota 4</strong></p>
    </div>
  </div>
  <div id="alumno1" class="alumno">
    <div id="titulo1">
      <p><strong>Alumno 1</strong></p>
    </div>
    <input type="text" id="alumno1-nota1">
    <input type="text" id="alumno1-nota2">
    <input type="text" id="alumno1-nota3">
    <input type="text" id="alumno1-nota4">
  </div>
  <div id="alumno1" class="alumno">
    <div id="titulo1">
      <p><strong>Alumno 2</strong></p>
    </div>
    <input type="text" id="alumno2-nota1">
    <input type="text" id="alumno2-nota2">
    <input type="text" id="alumno2-nota3">
    <input type="text" id="alumno2-nota4">
  </div>
  <div id="alumno1" class="alumno">
    <div id="titulo1">
      <p><strong>Alumno 3</strong></p>
    </div>
    <input type="text"  id="alumno3-nota1">
    <input type="text"  id="alumno3-nota2">
    <input type="text"  id="alumno3-nota3">
    <input type="text"  id="alumno3-nota4">
  </div>
  <div id="alumno1" class="alumno">
    <div id="titulo1">
      <p><strong>Alumno 4</strong></p>
    </div>
    <input type="text" id="alumno4-nota1">
    <input type="text" id="alumno4-nota2">
    <input type="text" id="alumno4-nota3">
    <input type="text" id="alumno4-nota4">
  </div>
  
  <div id="promedios">
    <p><strong>Promedio</strong></p>
    <p id="mensaje" class="promedio_output">0</p>
    <p id="mensaje2" class="promedio_output">0</p>
    <p id="mensaje3" class="promedio_output">0</p>
    <p id="mensaje4" class="promedio_output">0</p>
    <br><br>
  </div>

  <p><strong>Condicion</strong></p>
  <p id="listaA"></p>
  <p id="listaD"></p>
  
</body>
</html>

He comentado el código para que entendieras mas o menos lo que quise hacer, uso algunos metodos de arreglos como reduce o every, espero que te sea de alguna utilidad.

PD: el snippet esta bugged y no muestra el color de la condición del alumno.

Tu Respuesta

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