0

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?

3
  • Prueba con document.getElementsByClassName('backgroundUp').style.display = "block"; en vez de flex
    – RuthIsRoot
    Commented el 15 sept. 2021 a las 19:15
  • Hola y bienvenido. Estás en la comunidad en español. Por favor traduce tu pregunta para evitar que sea cerrada o trasládala a la comunidad en inglés.
    – DjCrazy
    Commented el 15 sept. 2021 a las 19:16
  • Por favor, traduce el título de tu consulta. Commented el 15 sept. 2021 a las 20:17

1 respuesta 1

1

Es importante tener la consola abierta para poder ver los errores. En tu caso tendrás un Uncaught TypeError indicando que no es posible leer las propiedades de undefined, porque document.getElementsByClassName('backgroundUp').display no está definido (no existe).

document.getElementsByClassName() devuelve una colección (array) de elementos.

Si solo tienes un elemento con clase backgroundUp, será el índice cero de la colección:

document.getElementsByClassName('backgroundUp')[0].style.display = 'flex';

Si tienes múltiples elementos con la misma clase y quieres aplicar cambios a todos ellos, tendrás que recorrer el array:

document.getElementsByClassName('backgroundUp').forEach(element => {
    element.style.display = 'flex';
});

Adicionalmente, te recomiendo utilizar los métodos document.querySelector() y document.querySelectorAll(), en los que puedes utilizar los mismos selectores que en CSS.

Document.querySelector() - Web APIs | MDN

Document.querySelectorAll() - Web APIs | MDN

1
  • Gracias por tu ayuda! Al final terminé utilizando element.querySelector() y en el código HTML agregué la propiedad style al elemento.
    – D-negras24
    Commented el 16 sept. 2021 a las 20:17

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.