Skip to main content
3 de 3
Legibilidad en el código.
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

Cuando se presione el botón el programa debería mostrar una lista en azul los alumnos aprobados y en rojo la lista de alumnos reprobados

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.

user333623