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

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

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;
     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 Alumnoalumno 1 hasta el alumno 4, debería aparecer qué alumnos aprobaron y quienes no.

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

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.

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

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.

se eliminaron 2916 caracteres en el cuerpo
Origen Enlace
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

Este es todo mi codigo JS.

Este es todo mi codigo JS.

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>EP4 - Ejercicio 2</title>
        <style>
            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%;
        }
            
        </style>
        <script type="text/javascript">
    
                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
                                }
    
                    }
                } 
    
    
        </script>
    </head>
    <body>
        <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>
        
    </body>
    </html>

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.

Aqui esta todo lo que he avanzado, el porblema es la lista de alumnos aprobados y desaprobados. Desde el Alumno 1 hasta el alumno 4 deberia darme que alumnos aprobaron y quienes no. UnaUna consulta mas, como podriamás: ¿Cómo podría hacer para que el programa me muestre el promedio mientras voy typeandotipeando las notas? No sabia comocómo hacerlo asique, así que lo pasepasé a la funcionfunción del botonbotón. AgradeceriaAgradecería bastante la ayuda con estos 2 problemas. No se que mas poner sinceramente porque no me deja poner la pregunta.

Este es todo mi codigo JS.

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>EP4 - Ejercicio 2</title>
        <style>
            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%;
        }
            
        </style>
        <script type="text/javascript">
    
                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
                                }
    
                    }
                } 
    
    
        </script>
    </head>
    <body>
        <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>
        
    </body>
    </html>

Aqui esta todo lo que he avanzado, el porblema es la lista de alumnos aprobados y desaprobados. Desde el Alumno 1 hasta el alumno 4 deberia darme que alumnos aprobaron y quienes no. Una consulta mas, como podria hacer para que el programa me muestre el promedio mientras voy typeando las notas? No sabia como hacerlo asique lo pase a la funcion del boton. Agradeceria bastante la ayuda con estos 2 problemas. No se que mas poner sinceramente porque no me deja poner la pregunta.

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.

Origen Enlace
user333623
user333623

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

Este es todo mi codigo JS.

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>EP4 - Ejercicio 2</title>
        <style>
            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%;
        }
            
        </style>
        <script type="text/javascript">
    
                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
                                }
    
                    }
                } 
    
    
        </script>
    </head>
    <body>
        <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>
        
    </body>
    </html>

Aqui esta todo lo que he avanzado, el porblema es la lista de alumnos aprobados y desaprobados. Desde el Alumno 1 hasta el alumno 4 deberia darme que alumnos aprobaron y quienes no. Una consulta mas, como podria hacer para que el programa me muestre el promedio mientras voy typeando las notas? No sabia como hacerlo asique lo pase a la funcion del boton. Agradeceria bastante la ayuda con estos 2 problemas. No se que mas poner sinceramente porque no me deja poner la pregunta.