Question

我正在尝试在按钮点击时进行基本密码匹配。下面是输入，按钮和脚本。如果密码= test123，我想要做的就是按钮点击检查。如果是，则显示提醒，然后隐藏div。

当我点击按钮时没有任何反应。我知道脚本正在执行。如果我将alert(document.getElementById('passbox1').value);更改为alert("starting");，我会看到提醒。

<div id="passdiv">
        <input name="passbox1" type="password" /> &nbsp;&nbsp;<input name="submit" onclick="showDiv()" type="button" value="Submit" /></div>

<div id="list">testing</div>

<script>
function showDiv() { 
    alert(document.getElementById('passbox1').value);
    if( document.getElementById('passbox1').value == "test123") {
        alert("match");
        document.getElementById('passdiv').hidden = true;
        document.getElementById('list').hidden = false;
    } else {
         alert("Password is incorrect.");
    }

}
</script>

Answer 1

假设您已经在HTML中定义了passbox1 div，请尝试使用以下代码段，此外，您应该在实际调用它之前声明您的函数showDiv（）。

＆＃13;

<script>
  function showDiv() {
    alert(document.getElementById('passbox1').value);
    if (document.getElementById('passbox1').value == "test123") {
      alert("match");
      document.getElementById('passdiv').style.visibility = "hidden";
      document.getElementById('list').style.visibility = "visible";
    } else {
      alert("Password is incorrect.");
    }

  }
</script>
<div id="passdiv">
  <input name="passbox1" type="password" id="passbox1" />&nbsp;&nbsp;
  <input name="submit" onclick="showDiv()" type="button" value="Submit" />
</div>

<div id="list">testing</div>

＆＃13;

Answer 2

您有几个问题，请参阅小提琴：https://jsfiddle.net/vctbszc2/2/

您无法获得没有值的div的值：）

要修复添加带值的输入字段或使用innerHTML，请执行以下操作：alert(document.getElementById('list').innerHTML);

<body onload="showDiv()">
<div id="list">testing</div>
</body>
<script>
function showDiv() { 
    alert(document.getElementById('list').innerHTML);
    //innerHTML will get text inside list
    //Also .getElementById() was not targeting an ID in your example
    if( document.getElementById('list').value == "test123") {
        alert("match");
        document.getElementById('passdiv').hidden = true;
        document.getElementById('list').hidden = false;
    } else {
         alert("Password is incorrect.");
    }

}
</script>

Answer 3

尝试运行此代码，如果它的工作：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type="text" id="passbox1">
<button onclick="showDiv()">Check</button>
<div id="list">testing</div>
<div id="passdiv" style="display:none;">PassDIV</div>

<script>
function showDiv() { 
    alert(document.getElementById('passbox1').value);
    if( document.getElementById('passbox1').value == "test123") {
        alert("match");
        document.getElementById('passdiv').style.display ="block";
        document.getElementById('list').style.display = "none";
    } else {
         alert("Password is incorrect.");
    }

}
</script>
</body>
</html>

说明：您不能使用element.hidden来隐藏元素，而是使用element.style.display。在这里阅读答案：Show/hide 'div' using JavaScript

警报不会在javascript中触发

3 个答案: