[英]Bootstrap 5 dismissable alert isn't working properly
我的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>
最初,应该隐藏警报。 在我的脚本中单击提交按钮后,它应该会显示danger
警报。 这是我的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";
})
但是当我执行代码时,警报根本没有隐藏。 其次,单击提交按钮后,出现以下错误:
未捕获的类型错误:无法设置 null 的属性(设置“类名”)
这是为什么? 请帮我。
样式标志是否重要有助于隐藏?
风格=“显示:无;重要;”
这就是我让它正常工作的方式:
<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.