Question

该元素被css隐藏，我想在用户在提示符下输入输入值后显示。我试过通过搜索类似的例子但我的不起作用。

app.js

var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
if (firstName && secondName != ' ') {
    var x = document.getElementById('standard');
    x.style.display = "block";
} else {
    alert('please enter first and second name');
}

tut.html

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="app.js"></script>
</head>

<body>
    <h1 id="heading">Heading</h1>
    <div id="standard"> <input type="radio" name="standard">1 <input type="radio" name="standard">2 </div>
</body>

</html>

Answer 1

在下面添加您的脚本文件。问题是在 DOM 之前加载脚本。您的解决方案是here。

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <h1 id="heading">Heading</h1>
      <div id="standard">
         <input type="radio" name="standard">1
         <input type="radio" name="standard">2
      </div>
      <script type="text/javascript" src="app.js"></script> 
   </body>
</html>

Answer 2

您的Javascript代码对我来说很好看。唯一看起来有点错误的是if语句，但无论如何都应该触发它。这个测试对你有用吗？

＆＃13;

    var firstName = prompt('Please enter your first name');
    var secondName = prompt('Please enter your second name');
    
    if (firstName != '' && secondName != ''){
      var x = document.getElementById('standard');
      x.style.display = "block";
    }
    else{
      alert('please enter first and second name');
    }

＆＃13;

#standard { display: none; }

＆＃13;

<html>
<head></head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
</body>
</html>

＆＃13;

现在，您真正的问题是，当您尝试取消隐藏它时，不会加载HTML / DOM元素。您可以通过查看Chrome控制台进行验证，并且您会看到一些错误，指出您无法设置未定义的属性样式。

要解决此问题，您有两种选择：

1）将app.js放在身体的末端。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

2）否则你可以把你的JS代码加载到窗口加载：

window.onload = function() {
        var firstName = prompt('Please enter your first name');
        var secondName = prompt('Please enter your second name');

        if (firstName != '' && secondName != ''){
          var x = document.getElementById('standard');
          x.style.display = "block";
        }
        else{
          alert('please enter first and second name');
        }
};

这应该使您的代码有效。后一种方法是优选的。

Answer 3

您无法看到div元素，因为您在加载html之前调用了脚本，因此您可以通过两种方式执行此操作：

调用底部的app.js

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

维护html并通过调用window.onload来修改app.js

var firstName = prompt("Please enter your first name");

var secondName = prompt("Please enter your second name");

function init(){

if (firstName && secondName != ' ') {
var x = document.getElementById('standard');
x.style.display = "block";
} else {
  alert('please enter first and second name');

       }
  }

window.onload = init;

Answer 4

问题出在你的javascript if语句中。看看这一行：

if (firstName && secondName != ' ') {

此行检查变量firstName是否已定义且变量secondName不等于' '。您需要检查两个变量是否都不等于' '。接下来，请勿使用' '。如果这样做，那么用户可以将提示框保留为空，并且if语句仍为正数。而是检查用户是否输入了字符（A-Z或a-z）：

var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
var patt = /[abcdefghijklmnopqrstuvwxyz]/ig;

if (firstName.search(patt) != -1 && secondName.search(patt) != -1) {    
  var x = document.getElementById('standard');
  x.style.display = "block";
} else {
  alert('please enter first and second name');
}

您还需要将<script>标记放在HTML文档的末尾。否则，DOM方法document.getElementById()将返回undefined。

Javascript显示隐藏的元素

4 个答案: