[英]Bootstrap 5 dismissable alert isn't working properly
I have an alert in my html
code:我的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>
Initially, the alert should be hidden.最初,应该隐藏警报。 Upon clicking the submit button in my script, it should show the danger
alert.在我的脚本中单击提交按钮后,它应该会显示danger
警报。 This is my js
:这是我的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";
})
But when I execute the code, the alert isn't hidden at all.但是当我执行代码时,警报根本没有隐藏。 Secondly, upon clicking the submit button, I get the following error:其次,单击提交按钮后,出现以下错误:
Uncaught TypeError: Cannot set properties of null (setting 'className')未捕获的类型错误:无法设置 null 的属性(设置“类名”)
Why is that?这是为什么? Please help me.请帮我。
Does the style flag?important helps for hiding?样式标志是否重要有助于隐藏?
style="display:none;important;"风格=“显示:无;重要;”
this is how i got it to work fine:这就是我让它正常工作的方式:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.