JavaScript中表单输入的值为空白答案

【问题标题】：Value of form input is blank in JavaScriptJavaScript中表单输入的值为空白
【发布时间】：2020-08-24 21:43:09
【问题描述】：

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

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

【问题讨论】：

var pass = document.getElementById("pass").value; 设置在页面初始加载时通过，因此它将为空，您需要在 keydown 事件侦听器中更新 pass，或检索 createCookie 中的值
这能回答你的问题吗？ Global variable not changing on event
@HereticMonkey 不，因为它使用的是 JQuery。我想要一个严格的 JS 解决方案。

标签： javascript html forms getelementbyid

【解决方案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>

【讨论】：

是的，它有效。然而，为什么？在函数外部定义的变量不是也可以在函数内部使用吗？还是我错了？
因为在加载页面的函数外捕获值，只有当你按下按钮时才能在函数内。
哦，好的，有道理，谢谢。允许时将接受答案。
没问题 :) 下个问题见。

【解决方案2】：

您应该在提交时获得价值，而不是在加载 js 文件时。你也可以用 onchange 功能收听

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

【讨论】：

【解决方案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)
}

【讨论】：

【解决方案4】：

把你的变量放在函数里面。与最初加载页面时一样，它们的值将为 null，并且您不会为它们重新分配值。

所以，要么更改他们在keydown上的值，要么设置他们在click上的值。

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

检查sn-p。

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>

【讨论】：