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 。为什么？这有什么不对？

小提琴：https://jsfiddle.net/fL0z59o3/#&togetherjs=FAKVrL1jG3

Answer 1

内联事件期望函数位于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();
  }
}

＆＃13;

<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>

＆＃13;

window.onload

＆＃13;

没有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(); } }

＆＃13;

<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>

＆＃13;

set c=1 

while ( $c <= 5 ) 

#JOB='qsub -m abe -N Big_run - << EOJ matlab -nodisplay -nodesktop << M_PROG test ($c); M_PROG EOJ` 

@ c = $c + 1 

end

＆＃13;

Answer 2

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

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不适用于表单

4 个答案: