document.getElementById is not working for a form
<p>I have some code like this:</p>

<p><strong>HTML</strong></p>

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

<p><strong>JavaScript</strong></p>

<pre><code>function checkChangeForm() {

    var current = document.getElementById("currentPw").value;
    var newPw = document.getElementById("newPw").value;
    var newPwCheck = document.getElementById("newPwCheck").value;
    if (current != "" &amp;&amp; newPw != "" &amp;&amp; newPwCheck != "") {
        if (newPw == newPwCheck) {
            if (newPw.length &gt;= 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();
    }
}
</code></pre>

<p>Supposing that by the time the button is pressed, the form would have been loaded, and when the variable is created by <code>document.getElementById("changePwForm")</code> again, it should be existing. However, it returned <strong>NULL</strong>. Why? What is wrong here? </p>

<p>Fiddle: <a href="https://jsfiddle.net/fL0z59o3/#&amp;togetherjs=FAKVrL1jG3" rel="nofollow">https://jsfiddle.net/fL0z59o3/#&amp;togetherjs=FAKVrL1jG3</a></p>