I’m typing with my mobile phone and I don’t have access to a tool for writing the complete code easily, but look at this mistakes in your code:
- You must Add
document.
before anygetElementById
in your code. - You must wrap
visible
between ” “:document.getElementById('bro').style.visibility = "visible"
; - What is
set
(inset.setTimeout
)? remove it from before ofsetTimeout()
. - What is
n.toString()
?. you must assign it, no using it directly:.innerHTML=n.toString()
- Put
while
insetInterval()
- You have used
visibility
inpopup
function anddisplay
in another place (for change visibility ofbro
). Use one of them in your code (css
andjs
andhtml
); - Use
document.querySelector('[name="block"]').style.display = "none";
for hiding theblock
elem.
8- Changez-index
of#texto
to 3.
Updated part:
Now, you can test the result here. this is your code itself that its problems have been solved:
#bro {
position: absolute;
left: 50px;
top: 150px;
visibility: hidden;
justify-content: center;
z-index: 3;
font-size: 20px;
}
#texto {
position: absolute;
justify-content: center;
transition: none;
background-color: inherit;
padding: inherit;
z-index: 3;
font-size: 20pt;
}
aside {
position: absolute;
justify-content: center;
width: 600px;
height: 500px;
background-color: blue;
border-radius: 30px;
z-index: 2;
}
<body onload='popup()'>
<p id="texto" color="red">3</p>
<button id="bro" onclick="bro()">close</button>
<aside name="block"></aside>
<script>
var n = 3;
function popup() {
setTimeout(function() {
document.getElementById('bro').style.visibility="visible";
}, 3000);
var t2=setInterval(function() {
debugger
if(n--==0) clearInterval(t2);
else document.getElementById("texto").innerHTML=n+"";
}, 1000);
}
function bro() {
document.getElementById('bro').style.visibility = "hidden";
document.getElementById('texto').style.display = "none";
document.querySelector('[name="block"]').style.display = "none";
}
</script>
</body>
1
solved setTimeout is not showing text