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.
var inputs = document.querySelectorAll('input[type="text"]');
, luego los recorres y le añades unlistener
a cada uno, indicando que cada vez que escribas, llamas a la funciónprocesarNotas()
, así:inputs.forEach(function(input) { input.addEventListener('input', procesarNotas); });
if
delfor
final, en vez denombresAprobados = notasFinal[i]
colocanombresAprobados.push("Alumno " + (i + 1));
y en vez delista1.innerHTML = nombresAprobados
colocalista1.innerHTML = nombresAprobados.join(', ');
, lo mismo con elelse
pero con el arraynombresDesaprobados
y la variablelista2
.