getElementById().style.display Not Toggling HTML Button (Show/Hide)
Question
I'm starting to learn Javascript and the issue I'm stuck on is getting an HTML button to show or hide. I've referred to at least a dozen posts on StackOverflow, all of which recommend the following lines respectively:
document.getElementById('id').style.display = "block";
And
document.getElementById('id').style.display = "none";
I made a basic Javascript that asks the user to enter their name which will then display a message greeting the user by name. But I have an if...else statement that checks if the input is blank, and if it's blank a message will appear asking for a valid name and a Retry button appears which refreshes the page.
I have the above lines of code in place but either way the Retry button always appears. I have tried adding style="display:hidden" in the code but then the button never appears.
Below is my full code. What am I doing wrong that the getElementById().style.display code is not working?
<html> <head> <script> var userName = prompt("Please enter your name: "); if (userName == "") { document.write("Please enter a valid name! <br><br>"); document.getElementById('btnRetry').style.display = "block"; } else { document.write("Hello " + userName + "!"); document.getElementById('btnRetry').style.display = "none"; } </script> <div id="btnRetry"> <input type=button onclick=location.reload() value="Retry" /> </div> </head> </html>
6 answers
solution1
4 ACCPTED 2018-08-14 09:23:20
You need to wait from the DOM to be loaded then execute your script, using:
document.addEventListener('DOMContentLoaded', function() {
//DOM IS READY HERE
});
NOTE1: You've to add quotes " to the input attributes :
<input type="button" onclick="location.reload()" value="Retry">
NOTE2: It will be better to avoid the use of document.write() and use a separated div to show you messages.
<html> <head> <script> document.addEventListener('DOMContentLoaded', function() { var userName = prompt("Please enter your name: "); if (userName == "") { document.getElementById('message').innerHTML = "Please enter a valid name! <br><br>"; document.getElementById('btnRetry').style.display = "block"; } else { document.getElementById('message').innerHTML = "Hello " + userName + "!"; document.getElementById('btnRetry').style.display = "none"; } }, false); </script> </head> <body> <div id="message"></div> <div id="btnRetry"> <input type="button" onclick="location.reload()" value="Retry" /> </div> </body> </html>
solution2
3 2018-08-14 09:20:39
Your HTML is INVALID .
There are following errors in your code:
-
<div>is a tag that belongs to<body>, not the<head>tag. - any script file should be placed at the end of body tag.
Try the following code and I should run fine as expected.
<html> <head> </head> <body> <div id="btnRetry"> <input type=button onclick=location.reload() value="Retry" /> </div> <script> var userName = prompt("Please enter your name: "); if (userName == "") { document.write("Please enter a valid name! <br><br>"); document.getElementById('btnRetry').style.display = "block"; } else { document.write("Hello " + userName + "!"); document.getElementById('btnRetry').style.display = "none"; } </script> </body> </html>
solution3
1 2018-08-14 09:19:23
Your HTML syntax is not valid. <div> tags have to be in the <body> tag if you want to see them on the screen, not the <head> tag. You'll also want to move the script to the bottom of the HTML body tag, so that all HTML nodes exist before your script tries modifying them. As written, there wasn't a button yet to show or hide, since it appeared After the script.
One you start moving your script to a different file, you'll see this problem less and less, but for starters, just put all the scripting at the bottom of the body.
<html> <head></head> <body> <div id="btnRetry"> <input type=button onclick=location.reload() value="Retry" /> </div> <script> var userName = prompt("Please enter your name: "); if(userName == "") { document.write("Please enter a valid name! <br><br>"); document.getElementById('btnRetry').style.display = "block"; } else { document.write("Hello " + userName + "!"); document.getElementById('btnRetry').style.display = "none"; } </script> </body> </html>
solution4
1 2018-08-14 09:22:38
You have two issues:
- Your
<div>is in the<head>section, not the<body> - Your script executes before the HTML is rendered
Instead, try this:
<html>
<head></head>
<body>
<div id="btnRetry">
<input type=button onclick=location.reload() value="Retry" />
</div>
<script>
var userName = prompt("Please enter your name: ");
if (userName == "") {
document.write("Please enter a valid name! <br><br>");
document.getElementById('btnRetry').style.display = "block";
} else {
document.write("Hello " + userName + "!");
document.getElementById('btnRetry').style.display = "none";
}
</script>
</body>
</html>
solution5
1 2018-08-14 09:23:51
OK so your code itself isn't wrong, the javascript runs fine. However, due to the way javascript works, and html rendering, it renders in order.
So anything at the top renders first, then things below that will render. What you've got is a blocking javascript function running (prompt) which prevents the rest of the DOM loading. So when you do document.getElementById it will be returning undefined, as there is no element at the point you call it (as it hasn't rendered yet).
What you need to do is move the to the bottom of the body tags. It's also a good idea to have HTML inside body tags, not head tags (to make sure it's valid). Here is your code, which works because it renders the HTML element, then runs the code:
<html> <head> </head> <body> <div id="btnRetry"> <input type=button onclick=location.reload() value="Retry" /> </div> <script> var userName = prompt("Please enter your name: "); if (userName == "") { document.write("Please enter a valid name! <br><br>"); document.getElementById('btnRetry').style.display = "block"; } else { document.write("Hello " + userName + "!"); document.getElementById('btnRetry').style.display = "none"; } </script> </body> </html>
solution6
0 2018-08-14 09:29:51
Correct your Html like this. you are trying to change HTML content before the HTML Dom load.
<html> <head> <!-- js your js here --> <script> var userName = prompt("Please enter your name: "); if(userName == "") { document.write("Please enter a valid name! <br><br>"); document.getElementById('btnRetry').style.display = "block"; } else { document.write("Hello " + userName + "!"); document.getElementById('btnRetry').style.display = "none"; } </script> </head> <body> <div id="btnRetry"> <input type=button onclick=location.reload() value="Retry" /> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.