admin管理员组文章数量:1356815
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 remend 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>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 remend 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>-
document.getElementById('btnRetry').style.display =will execute (and fail) before the element exists - check the browser developer tools console – Jaromanda X Commented Aug 14, 2018 at 9:17
6 Answers
Reset to default 4You 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>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>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>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>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>
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>本文标签： javascriptgetElementById()styledisplay Not Toggling HTML Button (ShowHide)Stack Overflow
版权声明：本文标题：javascript - getElementById().style.display Not Toggling HTML Button (ShowHide) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744071971a2586054.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论