Question

所以我的代码基本上是告诉用户注册时出了什么问题，一切都有效。 Div应该更新文本字段以说明他们的注册有什么问题，但事实并非如此，这是我的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 = "";
    }
}

这是我的div

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

Answer 1

在完全构造DOM之前，您可能正在尝试访问该div。将该代码放入initPage函数中。您需要一个超出该函数范围的变量，以便您的其他函数可以访问它们。您应该将所有这些放在闭包中以避免创建全局变量。

例如：

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

    // ...
})();

Answer 2

你必须按id获取元素，然后设置它的内部html。

document.getElementById("errorText").innerHTML = "Emails Do Not Match.";

并且直接使用errorText.innerHTML时也一样。

为什么我的div没有正确更新？

2 个答案: