Estoy usando el siguiente código para mostrar un brindis en la carga de la página en HTML y JS,
<!-- Toast --> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <script> window.onload = (event) => { let myAlert = document.querySelectorAll('.toast'); let bsAlert = new bootstrap.Toast(myAlert); bsAlert.show(); 5} </script>pero no se muestra nada en la carga de la página, ¿espero que pueda ayudar?
Gracias
document.querySelectorAll devuelve varios elementos, solo desea un elemento para bootstrap.Toast . Creé un fragmento de su código con una ligera modificación, es decir, obtuve el primer .toast y luego comprobé que existe.
window.onload = (event) => { let myAlert = document.querySelectorAll('.toast')[0]; if (myAlert) { let bsAlert = new bootstrap.Toast(myAlert); bsAlert.show(); } }; <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>