Question

So my code basically is to tell users what’s wrong in their registration, everything works but one thing. The Div should update the text field to say what’s wrong with their registration, but it is not, here is my JavaScript

window.onload = initPage;
submitBtn = document.getElementById("submit");
errorText = document.getElementById("errortext");


function initPage() {
    document.getElementById("password2").onkeyup = checkPassword;
    document.getElementById("password2").onblur = checkPassword;
    document.getElementById("email2").onkeyup = checkEmail;
    document.getElementById("email2").onblur = checkEmail;
    submitBtn.disabled = false;
}

function checkPassword() {
    var password1 = document.getElementById("password1").value;
    var password2 = document.getElementById("password2").value;
    if (password1 != password2) {
        document.getElementById("password1").className = "denied";
        document.getElementById("password2").className = "denied";
        submitBtn.disabled = true;
        document.getElementById("submit").className = "denied";
        errorText.innerHTML = "Passwords do not match.";
    } else {
        document.getElementById("password1").className = "password2";
        document.getElementById("password2").className = "password2";
        document.getElementById("submit").className = "button1";
        submitBtn.disabled = false;
        errorText.innerHTML = "";
    }
}

function checkEmail() {
    var email1 = document.getElementById("email1").value;
    var email2 = document.getElementById("email2").value;
    if (email1 != email2) {
        document.getElementById("email1").className = "denied";
        document.getElementById("email2").className = "denied";
        submitBtn.disabled = true;
        document.getElementById("submit").className = "denied";
        errorText.innerHTML = "Emails Do Not Match.";

    } else {
        document.getElementById("email1").className = "regtext";
        document.getElementById("email2").className =  "regtext";
        submitBtn.getElementById("submit").disabled = true;
        document.getElementById("submit").className = "button1";
        errorText.innerHTML = "";
    }
}

here is my div

<tr><td colspan="2"><div id="errortext"></div></td></tr>

Answer 1

You’re probably trying to access that div before the DOM is fully constructed. Put that code in with the initPage function. You’ll need a variable outside of the scope of that function so your other functions can access them. You should put all of this in a closure to avoid creating global variables.

Ex:

(function(){    
    var submitBtn;
    var errorText;

    function initPage() {
        submitBtn = document.getElementById("submit");
        errorText = document.getElementById("errortext");
        document.getElementById("password2").onkeyup = checkPassword;
        document.getElementById("password2").onblur = checkPassword;
        document.getElementById("email2").onkeyup = checkEmail;
        document.getElementById("email2").onblur = checkEmail;
        submitBtn.disabled = false;
    }

    // This next line should be under the declaration above
    window.onload = initPage;

    // ...
})();