javascript if语句在从公共数组中读取时不能使用ifValid

时间:2014-10-02 22:22:14

标签: javascript validation if-statement arraylist

当我将数据输入newState时,只执行第一个if语句。

并显示错误"未捕获的TypeError:无法读取属性' toUpperCase'未定义"。我只是想在我的项目中使用普通的javascript。

我猜你编辑了代码,但由于排名系统阻止我查看剩余的编辑,我无法看到这些更改。如何在不排名高的情况下查看它们? @mikhail

var states = ["CA", "WA", "OR", "NV", "NM", "AZ", "WY", "MT"];
var $ = function (id) {
    return document.getElementById(id);
}
//Display valid states in textbox
var displayValidStates = function () {
    var statesString = " ";
    var i = 0;
    statesString += states[i] + " ";
    $("validStates").value = states;
}

var addState = function () {
    var newStateObj = $("newState").value;
    var isValid = true;
    if ($("newState").length != 2) {
        $("newState").value = "";
        $("newStateError").firstChild.nodeValue = "The state code must contain two letters.";
        isValid = false;
    }
    if (newStateObj == stateCodeLookup()) {
        $("newStateError").firstChild.nodeValue = "State code is already in list.";
        isValid = false;
    }
    if (isValid) {
        $("newState").value = "";
        $("newStateError").firstChild.nodeValue = " ";
        states[states.length] = $("newState").value.toUpperCase();
        isValid = true;
    }
}

var stateCodeLookup = function (stateCode) {
    stateCode = stateCode.toUpperCase();
    for (var i = 0; i < states.length; i++) {
        if (states[i] == stateCode) {
            return true;
        }
    }
    return false;
}
var joinList = function () {
    var emailAddress1 = $("emailAddress1").value;
    var emailAddress2 = $("emailAddress2").value;
    var isValid = true;


if (emailAddress1 == "") {
    $("emailAddress1Error").firstChild.nodeValue = "This field is required.";
    isValid = false;
} else {
    $("emailAddress1Error").firstChild.nodeValue = "";
}


if (emailAddress2 == "") {
    $("emailAddress2Error").firstChild.nodeValue = "This field is required.";
    isValid = false;
} else if (emailAddress1 !== emailAddress2) {
    $("emailAddress2Error").firstChild.nodeValue = "This entry must equal first entry.";
    isValid = false;
} else {
    $("emailAddress2Error").firstChild.nodeValue = "";
}


if ($("firstName").value == "") {
    $("firstNameError").firstChild.nodeValue = "This field is required.";
    isValid = false;
} else {
    $("firstNameError").firstChild.nodeValue = "";
}


var stateCode = $("stateCode").value;
if (!stateCodeLookup(stateCode)) {
    $("stateCodeError").firstChild.nodeValue = "State code is invalid.";
    isValid = false;
} else {
        $("stateCodeError").firstChild.nodeValue = "";
    }


    if (isValid) {
        $("emailForm").submit();
    }
}
window.onload = function () {
    displayValidStates();
    $("addNewState").onclick = addState;
    $("joinList").onclick = joinList;
    $("emailAddress1").focus();
}

:. html:

<label for="validStates">Valid states:</label>
<textarea id="validStates" cols="30" rows="2" disabled style="none"></textarea><br>
<label for="newState">State code to add:</label>
<input type="text" id="newState" size="1" maxlength="2" ><br>
<label>&nbsp;</label>
<input type="button" id="addNewState" value="Add State Code"><span id="newStateError"> </span><br><br>

2 个答案:

答案 0 :(得分:0)

如果您使用(假jQuery)函数$(...)获得的DOM元素没有值,则.value返回undefined。你的代码忽略了这样一个事实:.value可以多次未定义,只是调用另一个函数,这就引发了异常。

您应首先检查.value的返回值,并仅在符合预期类型的​​情况下调用其他函数。

答案 1 :(得分:0)

getElementById()如果无法找到目标元素,则会返回null。

检查以确保您正在寻找正确的内容,并且在您尝试对结果执行任何操作之前更新代码以检查null:

var val = $("newState").value;
if (val !== null) {
    // do your thing
}