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">Success</span> </div> Inicialmente, la alerta debe estar oculta. Al hacer clic en el botón Enviar en mi secuencia de comandos, debería mostrar la alerta de danger . Este es mi 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="Danger"; document.getElementById("alert").style.display="block"; })Pero cuando ejecuto el código, la alerta no se oculta en absoluto. En segundo lugar, al hacer clic en el botón Enviar, aparece el siguiente error:
TypeError no capturado: no se pueden establecer propiedades de nulo (configurando 'className')
¿Porqué es eso? Por favor, ayúdame.
¿La marca de estilo !important ayuda a ocultar?
style="display:ninguno!importante;"
así es como conseguí que funcionara bien:
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center justify-content-center" id="alert" style="display:none !important;"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <span id="msg">Success</span> </div> <input type="submit" id="submit" value="click me"> <script> 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 = "Danger"; document.getElementById("alert").style.display = "block"; }); </script>