Soy principiante en JavaScript and CSS. Estoy practicando haciendo algunos projectos. Ahora estoy haciendo una calculadora de calificaciones escolares, donde si tu promedio es superior a 7 aparece una pantalla por encima de la pantalla principal para felicitarte. Declaré la propiedad "display" en CSS como "none" para intentar cambiarla a "flex" en javascript con style.display = "flex".
El código de los estilos en CSS para la pantalla emergente es el siguiente...
.backgroundUp {
padding: 0;
margin: 0;
min-width: 800px;
min-height: 600px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-40%);
background-color: rgba(36, 38, 46, 0.808);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
overflow: hidden;
visibility: hidden;
}
Luego intento ocultar el .backgroundUp que contiene todos los elementos de la pantalla emergente con el siguiente código en JS...
function calculateGrade() {
var inputValues = document.getElementsByClassName("number");
var conca = "";
if (inputValues.length == 5 ){
for (var i = 0; i < inputValues.length; i++) {
var inputvalue = inputValues[i].value;
conca = conca + "+" + inputvalue;
var resultado= eval(conca);
var output = resultado / 5;
}
document.getElementById('prom').innerText=output;
document.getElementsByClassName('backgroundUp').style.display = "flex";
}else{
alert("Please, fill all the fields.");
}
}
Podrían ayudarme, por favor? Qué está mal o necesito hacer?
document.getElementsByClassName('backgroundUp').style.display = "block";
en vez deflex