document.getElementById 不适用于表单

Question

我有一些这样的代码：

HTML

<div id = "inputs" style="width:300px;">   
    <form id = "changePwForm" name = "changePwForm" method = "POST" action = "me.php">
        <input type = "password" id = "currentPw" name = "currentPw" class="loginBlank" style = "width:300px;margin-top:0px;" placeholder="Current Password"/>
        <input type = "password" id = "newPw" name = "newPw" class="loginBlank" style = "width:300px;margin-top:10px;" placeholder="New password"/>
        <input type = "password" id = "newPwCheck" name = "newPwCheck" class="loginBlank" style = "width:300px;margin-top:10px;" placeholder="Retype new password"/>
        <input type = "button" id = "submitBtn" onclick = "checkChangeForm()" class = "loginBlank" value = "Confirm" style = "width:300px;margin-top:10px;font-size:16px;" />
    </form>
</div>

JavaScript

function checkChangeForm() {

    var current = document.getElementById("currentPw").value;
    var newPw = document.getElementById("newPw").value;
    var newPwCheck = document.getElementById("newPwCheck").value;
    if (current != "" && newPw != "" && newPwCheck != "") {
        if (newPw == newPwCheck) {
            if (newPw.length >= 8) {
                alert("OK");

                document.getElementById("changePwForm").submit();
            } else {
                alert("Passwords must be longer than 8 characters.");
                document.getElementById("currentPw").value = "";
                document.getElementById("newPw").value = "";
                document.getElementById("newPwCheck").value = "";
                document.getElementById("newPw").focus();
            }
        } else {
            alert("The password does not match!");
            document.getElementById("newPw").value = "";
            document.getElementById("newPwCheck").value = "";
            document.getElementById("newPw").focus();
        }
    } else {
        alert("No password entered");
        document.getElementById("currentPw").value = "";
        document.getElementById("newPw").value = "";
        document.getElementById("newPwCheck").value = "";
        document.getElementById("currentPw").focus();
    }
}

假设在按下按钮时，表单已经加载，并且当 document.getElementById("changePwForm") 再次创建变量时，它应该存在。但是，它返回 NULL。为什么？这里有什么问题？

Fiddle: https://jsfiddle.net/fL0z59o3/#&togetherjs=FAKVrL1jG3

Answer 1

将您的脚本包含在 body 标记的末尾附近，看看它是否有效。

Answer 2

Inline-events expect function to be in global-scope, not under the scope of window.onload

如果您想继续 window.onload，请使用 addEventListener 或 Element.onEVENT_NAME

绑定事件

document.getElementById('submitBtn').addEventListener('click',checkChangeForm);

document.getElementById('submitBtn').addEventListener('click',checkChangeForm);
function checkChangeForm() {
  var current = document.getElementById("currentPw").value;
  var newPw = document.getElementById("newPw").value;
  var newPwCheck = document.getElementById("newPwCheck").value;
  if (current != "" && newPw != "" && newPwCheck != "") {
    if (newPw == newPwCheck) {
      if (newPw.length >= 8) {
        alert("OK");

        document.getElementById("changePwForm").submit();
      } else {
        alert("Passwords must be longer than 8 characters.");
        document.getElementById("currentPw").value = "";
        document.getElementById("newPw").value = "";
        document.getElementById("newPwCheck").value = "";
        document.getElementById("newPw").focus();
      }
    } else {
      alert("The password does not match!");
      document.getElementById("newPw").value = "";
      document.getElementById("newPwCheck").value = "";
      document.getElementById("newPw").focus();
    }
  } else {
    alert("No password entered");
    document.getElementById("currentPw").value = "";
    document.getElementById("newPw").value = "";
    document.getElementById("newPwCheck").value = "";
    document.getElementById("currentPw").focus();
  }
}

<div id="inputs" style="width:300px;">
  <form id="changePwForm" name="changePwForm" method="POST" action="me.php">
    <input type="password" id="currentPw" name="currentPw" class="loginBlank" style="width:300px;margin-top:0px;" placeholder="Current Password" />
    <input type="password" id="newPw" name="newPw" class="loginBlank" style="width:300px;margin-top:10px;" placeholder="New password" />
    <input type="password" id="newPwCheck" name="newPwCheck" class="loginBlank" style="width:300px;margin-top:10px;" placeholder="Retype new password" />
    <input type="button" id="submitBtn" class="loginBlank" value="Confirm" style="width:300px;margin-top:10px;font-size:16px;" />
  </form>
</div>

没有window.onload

function checkChangeForm() {
  var current = document.getElementById("currentPw").value;
  var newPw = document.getElementById("newPw").value;
  var newPwCheck = document.getElementById("newPwCheck").value;
  if (current != "" && newPw != "" && newPwCheck != "") {
    if (newPw == newPwCheck) {
      if (newPw.length >= 8) {
        alert("OK");

        document.getElementById("changePwForm").submit();
      } else {
        alert("Passwords must be longer than 8 characters.");
        document.getElementById("currentPw").value = "";
        document.getElementById("newPw").value = "";
        document.getElementById("newPwCheck").value = "";
        document.getElementById("newPw").focus();
      }
    } else {
      alert("The password does not match!");
      document.getElementById("newPw").value = "";
      document.getElementById("newPwCheck").value = "";
      document.getElementById("newPw").focus();
    }
  } else {
    alert("No password entered");
    document.getElementById("currentPw").value = "";
    document.getElementById("newPw").value = "";
    document.getElementById("newPwCheck").value = "";
    document.getElementById("currentPw").focus();
  }
}

<div id="inputs" style="width:300px;">
  <form id="changePwForm" name="changePwForm" method="POST" action="me.php">
    <input type="password" id="currentPw" name="currentPw" class="loginBlank" style="width:300px;margin-top:0px;" placeholder="Current Password" />
    <input type="password" id="newPw" name="newPw" class="loginBlank" style="width:300px;margin-top:10px;" placeholder="New password" />
    <input type="password" id="newPwCheck" name="newPwCheck" class="loginBlank" style="width:300px;margin-top:10px;" placeholder="Retype new password" />
    <input type="button" id="submitBtn" onclick="checkChangeForm()" class="loginBlank" value="Confirm" style="width:300px;margin-top:10px;font-size:16px;" />
  </form>
</div>

Answer 3

请将您的脚本移到正文标记的末尾附近

<body>
<div id = "inputs" style="width:300px;">   
    <form id = "changePwForm" name = "changePwForm" method = "POST" action = "me.php">
    ........
    </form>
    <script>
    function checkChangeForm() {
    .....
    }
    </script>
</div>
</body>

Answer 4

刚刚发现问题...我将 <form> 元素嵌套在另一个 <form> 元素中...删除外部元素使其工作。

document.getElementById 不适用于表单

document.getElementById is not working for a form

html

javascript

dom

getelementbyid