[英]Javascript hide and display elements by id not working for multiple cases
[英]Javascript hide and display id
我不想要一个按钮,我想要一个倒计时 5 秒的计时器,然后 javascript function 在页面加载时执行
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/app.min.css" />
<title>
Test
</title>
</head>
<body>
<!-- I don't want a button I want a timer instead that counts down 5 seconds then the javascript function executes -->
<button onclick="myFunction()">Click Me</button>
<div id="myDIV", class="myDIV">
Initializing Hide
</div>
<div id="myDIVS", class="myDIVS">
Hide Successful
</div>
<script type="text/javascript">
function myFunction(){
var target = document.getElementById("myDIV");
var show = document.getElementById("myDIVS");
if(target.style.display = "none"){
// target.style.display = "block";
show.style.display = "block";
}else{
show.style.display = "block";
}
}
</script>
</body>
<style>
.myDIV{
background-color: aqua;
margin: 30px;
padding: 50px 30px;
/* display: none; */
}
.myDIVS{
background-color: green;
margin: 30px;
padding: 50px 30px;
display: none;
}
</style>```
您需要使用setTimeout()
。 只需将onClick
代码放入其中,我也纠正了=
vs. ==
错误。
function myFunction() { var target = document.getElementById("myDIV"); var show = document.getElementById("myDIVS"); if (target.style.display == "none") { target.style.display = "block"; show.style.display = "none"; } else { target.style.display = "none"; show.style.display = "block"; } } setTimeout(myFunction, 5000);
.myDIV { background-color: aqua; margin: 30px; padding: 50px 30px; /* display: none; */ }.myDIVS { background-color: green; margin: 30px; padding: 50px 30px; display: none; }
<div id="myDIV" class="myDIV"> Initializing Hide </div> <div id="myDIVS" class="myDIVS"> Hide Successful </div> Wait for five seconds and see?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.