xxxxxxxxxx1
<nav class="navbar navbar-light bg-white">2
<div class="container-fluid">3
<ul class="navbar-nav flex-row me-auto mb-2 mb-lg-0">4
<li class="nav-item me-2">5
<a class="nav-link fw-bold" href="#alert">Display Alert</a>6
</li>7
</ul>8
<ul class="navbar-nav flex-row">9
<li class="nav-item me-2">10
<a class="nav-link text-reset fa-lg me-3 link_cursor" href="/" target="_blank" rel="noopener">11
<i class="fas fa-database"></i>12
</a>13
</li>14
</ul>15
</div>16
</nav>17
18
<div class="alert fade" id="alert-message" role="alert" data-mdb-color="info" data-mdb-position="top-right" data-mdb-stacking="true" data-mdb-width="535px"19
data-mdb-width="535px"20
data-mdb-append-to-body="true" data-mdb-hidden="true" data-mdb-autohide="true" data-mdb-delay="3000"></div>1
1
xxxxxxxxxx1
function showMessage(severity, text) {2
var alert = document.getElementById('alert-message');3
alert.innerText = text;4
let instance = mdb.Alert.getInstance(alert);5
instance.update({ color: severity });6
instance.show();7
}8
9
document.querySelectorAll("a[href='#alert']")[0].addEventListener('click', (e) => { showMessage('info', 'test'); });10
Console errors: 0