gpt4 book ai didi

javascript - getElementById().style.display 不切换 HTML 按钮(显示/隐藏)

转载 作者:太空宇宙 更新时间:2023-11-04 13:45:16 29 4
gpt4 key购买 nike

我开始学习 Javascript,我遇到的问题是让 HTML 按钮显示或隐藏。我在 StackOverflow 上至少引用了十几篇帖子,所有帖子都分别推荐了以下几行:

document.getElementById('id').style.display = "block";

document.getElementById('id').style.display = "none";

我制作了一个基本的 Javascript,要求用户输入他们的姓名,然后会显示一条消息,按姓名问候用户。但我有一个 if...else 语句来检查输入是否为空,如果为空,将出现一条消息,要求输入有效名称,并出现一个刷新页面的重试按钮。

我有上面的代码行,但无论哪种方式,重试按钮总是出现。我尝试在代码中添加 style="display:hidden" 但按钮从未出现。

下面是我的完整代码。 getElementById().style.display 代码不起作用,我做错了什么?

<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>

最佳答案

您需要等待 DOM 加载然后执行您的脚本,使用:

document.addEventListener('DOMContentLoaded', function() {
//DOM IS READY HERE
});

注意 1: 您必须将引号 " 添加到输入属性中:

<input type="button" onclick="location.reload()" value="Retry">

注意 2:最好避免使用 document.write() 并使用单独的 div 来显示消息。

<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>

关于javascript - getElementById().style.display 不切换 HTML 按钮(显示/隐藏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51837844/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com