es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El alerta desechable de Bootstrap 5 no está funcionando correctamente.

31 Jul, 2023 Programación

Tengo una alerta en mi código HTML:

<div class="alert alert-success alert-dismissible fade show d-flex align-items-center justify-content-center" id="alert" style="display:none;">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <span id="msg">Éxito</span>
</div>

Inicialmente, la alerta debería estar oculta. Al hacer clic en el botón de enviar en mi script, debería mostrar la alerta “danger”. Este es mi código JS:

document.getElementById("submit").addEventListener("click", function(){
     document.getElementById("alert").className = "alert alert-danger alert-dismissible fade show d-flex align-items-center justify-content-center";
     document.getElementById("msg").innerHTML = "Peligro";
     document.getElementById("alert").style.display = "block";
})

Pero cuando ejecuto el código, la alerta no se oculta en absoluto. Además, al hacer clic en el botón de enviar, obtengo el siguiente error:

Uncaught TypeError: No se pueden establecer propiedades de nulo (estableciendo ‘className’)

¿Por qué sucede esto? Por favor, ayúdame.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error indica que el método getElementById está devolviendo null, lo cual significa que no pudo encontrar un elemento con el ID dado.

    Una posibilidad es que el botón de submit no tenga un ID de submit, por lo que el método getElementById("submit") está devolviendo null. Asegúrate de que el ID del botón coincida con el utilizado en el script.

    Otra posibilidad es que el script se esté ejecutando antes de que el DOM se haya cargado por completo. En este caso, puedes envolver el script en un escuchador de evento DOMContentLoaded para asegurarte de que se ejecute solo después de que se haya terminado de cargar el DOM:

    document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("submit").addEventListener("click", function() {
    document.getElementById("alert").className = "alert alert-danger alert-dismissible fade show d-flex align-items-center justify-content-center";
    document.getElementById("msg").innerHTML = "Peligro";
    document.getElementById("alert").style.display = "block";
  });
});

    Al utilizar este escuchador de eventos, el script no se ejecutará hasta que el DOM se haya cargado por completo, por lo que el método getElementById debería funcionar correctamente.

Comments are closed.