Question

我开始学习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>

Answer 1

您需要从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>

Answer 2

您的HTML 无效。

您的代码中存在以下错误：

<div>是属于<body>的标签，而不是<head>标签。
任何脚本文件都应放在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>

Answer 3

您的HTML语法无效。如果您想在屏幕上看到<div>标签，而不是<body>标签，则必须在<head>标签中。您还需要将脚本移到HTML body标签的底部，以便所有HTML节点都存在，然后脚本尝试对其进行修改。按照书面规定，由于该按钮出现在脚本之后，所以没有按钮可以显示或隐藏。

开始将脚本移动到另一个文件时，您会越来越少地看到此问题，但是对于初学者来说，只需将所有脚本放在正文的底部即可。

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

Answer 4

您有两个问题：

您的<div>位于<head>部分，而不是<body>
您的脚本在呈现HTML之前执行

相反，请尝试以下操作：

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

Answer 5

好的，所以您的代码本身没有错，javascript运行正常。但是，由于javascript的工作方式和html呈现方式，它是按顺序呈现的。

因此，顶部的所有内容都会先呈现，然后下方的所有内容都会呈现。您所拥有的是一个正在运行的（提示）阻塞的javascript函数，该函数将阻止其余DOM的加载。因此，当您执行document.getElementById时，它将返回未定义状态，因为在您调用它的位置没有元素（因为它尚未呈现）。

您需要做的是将其移动到body标签的底部。在body标签（而不是head标签）中包含HTML（也是确保有效）也是一个好主意。这是您的代码，之所以有效，是因为它呈现HTML元素，然后运行代码：

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

Answer 6

像这样纠正您的HTML。您正在尝试在HTML Dom加载之前更改HTML内容。

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

getElementById（）。style.display不切换HTML按钮（显示/隐藏）

6 个答案: