JavaScript 中表单输入的值为空

Question

当我尝试检索在表单中输入的文本时，结果为空白。

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;

function createCookie() {
  window.alert(pass);
}

<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

当用户在表单中输入数据并按下提交时，调用函数createCookie()。我知道这行得通，因为如果我在函数中输入 window.alert("test");，它就行得通。因此问题出在pass.

我尝试从 var pass = document.getElementById("pass").value; 中删除 value，但这也没有用。

为了澄清，这是我在表单上按提交时显示的内容：

我难住了，因为这也是比较简单的代码。（我在 Chrome 84。）

TIA

Answer 1

您必须像这样在函数内部使用值：

document.getElementById("pass").addEventListener("keydown", function() {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
   var pass = document.getElementById("pass").value;
   var pinCode = document.getElementById("pinCode").value;
    window.alert(pass); 
      window.alert(pinCode); 
}

<div id = "validation">
    <form id = "validationForm">
        <fieldset>
            <label for = "pass">Password:</label><br  />
            <input type = "text" id = "pass" name = "pass"  /><br  />
            <label for = "pinCode">4-digit PIN:</label><br  />
            <input type = "text" id = "pinCode" name = "pinCode"  /><br  />
            <input type = "submit" value="Log In" onclick = "createCookie()"  />
            <p id = "rightorwrong"></p>
        </fieldset>
    </form>
</div>
<script type = "text/javascript" src = "password.js"></script>

Answer 2

您应该在提交时获取值，而不是在加载 js 文件时获取值。您也可以使用 onchange 函数收听

var pass;
function createCookie() {
  pass = document.getElementById("pass").value;
  window.alert(pass); 
}

Answer 3

javascript代码应该是这样的

document.getElementById("pass").addEventListener("keydown", function () {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";

});
document.getElementById("pinCode").addEventListener("keydown", function () {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
    var pass = document.getElementById("pass").value;
    var pinCode = document.getElementById("pinCode").value;
    alert(pass)
}

Answer 4

将变量放入函数中。最初加载页面时，它们的值将为空，您不会为它们重新分配值。

因此，要么更改它们在keydown上的值，要么设置它们在click上的值。

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

检查代码段。

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

JavaScript 中表单输入的值为空

Value of form input is blank in JavaScript

html

javascript

forms

getelementbyid