Question

我希望在网页上显示性别 - 男性或女性。

function validate() {
    var fieldsValid = true; 
    var city = document.getElementById("city").value;   
    var state = document.getElementById("state").value;  
    var zip = document.getElementById("zip").value; 
    var gender = document.getElementById("gender"); 
    var prevcourse = document.getElementById("course");

    if(city.length == 0) {
            fieldsValid = false;
            if(!document.getElementById("cityErrMsg")) {
            var errMsg = document.createElement("span"); 
            errMsg.id = "cityErrMsg"; 
            errMsg.appendChild(document.createTextNode("*City is required"));
            document.getElementById("cityId").appendChild(errMsg);
            }
    }
    else {
            var toRemove = document.getElementById("cityErrMsg");;
            if(toRemove){
            toRemove.parentNode.removeChild(toRemove);
            }
    }   
    if(state == "select one") {
            fieldsValid = false;
            if(!document.getElementById("stateErrMsg")) {
            var errMsg = document.createElement("span"); 
            errMsg.id = "stateErrMsg"; 
            errMsg.appendChild(document.createTextNode("*State is required"));
            document.getElementById("stateId").appendChild(errMsg);
            }
    }
    else {
            var toRemove = document.getElementById("stateErrMsg");;
            if(toRemove){
            toRemove.parentNode.removeChild(toRemove);
            }
    }   
    if(zip.length == 0) {
            fieldsValid = false;
            if(!document.getElementById("zipErrMsg")) {
            var errMsg = document.createElement("span"); 
            errMsg.id = "zipErrMsg"; 
            errMsg.appendChild(document.createTextNode("*Zip is required"));
            document.getElementById("zipId").appendChild(errMsg);
        }
    }
    else { 
            var toRemove = document.getElementById("zipErrMsg");;
            if(toRemove){
            toRemove.parentNode.removeChild(toRemove);
            }
    } 
    if(document.querySelector('input[name = "gender"]:checked') == null){
        fieldsValid = false;
        if(!document.getElementById("genderErrMsg")) {
            var errMsg = document.createElement("span"); 
            errMsg.id = "genderErrMsg"; 
            errMsg.appendChild(document.createTextNode("*Gender is required"));
            document.getElementById("genderId").appendChild(errMsg);
        }
    } 
    else {
            var toRemove = document.getElementById("genderErrMsg");;
            if(toRemove){
            toRemove.parentNode.removeChild(toRemove);
            gender = document.querySelector('input[name = "gender"]:checked').value
//this place im not sure if i have to add code to display male or female on a webpage
            }
    } 
    if(document.querySelector('input[name = "course"]:checked') == null) {
            fieldsValid = false;
            if(!document.getElementById("prevErrMsg")) {
                var errMsg = document.createElement("span"); 
                errMsg.id = "prevErrMsg"; 
                errMsg.appendChild(document.createTextNode("*Previous course is required"));
                document.getElementById("prevcourseId").appendChild(errMsg);
            }
    }
    else {
            var toRemove = document.getElementById("prevErrMsg");;
            if(toRemove){
                toRemove.parentNode.removeChild(toRemove);
    }
            addPreviousCourses(); 

    }
    if(document.getElementById("inputDiv")) {
        document.getElementById("inputDiv").remove();
    }

    function addPreviousCourses() {  
        outputCourses = ""; 
        iArray = [];
        if(document.getElementById("asp").checked) {
            iArray.push (document.getElementById("asp").value);

        }
        if(document.getElementById("java").checked) {
            iArray.push (document.getElementById("java").value);
        }
        if(document.getElementById("php").checked) {
            iArray.push (document.getElementById("php").value);
        }

        for (var i = 0; i < iArray.length; i++) {
            if(i < iArray.length - 1) {
                outputCourses += iArray[i] += ", ";
            }           
            else {
                outputCourses += iArray[i]; 
            }
        }
    }   

    if (fieldsValid){
    var display = document.createElement("div");
    var city = document.createTextNode("City: " + city);
    var state = document.createTextNode("State: " + state);
    var zip = document.createTextNode("Zip: " + zip);
    var gender = document.createTextNode("Gender: " + gender);
    var prevcourse = document.createTextNode("Previous course: " + outputCourses); 

    display.appendChild(city);
    display.appendChild(document.createElement("br"));
    display.appendChild(state);
    display.appendChild(document.createElement("br"));
    display.appendChild(zip);
    display.appendChild(document.createElement("br"));
    display.appendChild(gender);
    display.appendChild(document.createElement("br"));
    display.appendChild(prevcourse);


    display.id = "inputDiv";

    document.body.appendChild(display);
    } 

}

Answer 1

在没有看到你的HTML代码的情况下，这比任何事情更让人猜测，但我想我可以告诉问题在哪里......而且我说它实际上有两个问题：

您似乎有两个名为gender的单选按钮，但在代码的顶部，您正在读取ID为gender的元素的值：
```
var gender = document.getElementById("gender");
```
如果没有标识为gender的元素，则变量gender将具有值null，即您显示的内容。

现在你可以说＆＃34;好吧，即使我犯了这个错误，我也不应该null，因为我仍在更新gender变量的值在本节＆＃34;：

if(document.querySelector('input[name = "gender"]:checked') == null){
    fieldsValid = false;
    if(!document.getElementById("genderErrMsg")) {
        var errMsg = document.createElement("span"); 
        errMsg.id = "genderErrMsg"; 
        errMsg.appendChild(document.createTextNode("*Gender is required"));
        document.getElementById("genderId").appendChild(errMsg);
    }
} 
else {
        var toRemove = document.getElementById("genderErrMsg");;
        if(toRemove){
        toRemove.parentNode.removeChild(toRemove);
        gender = document.querySelector('input[name = "gender"]:checked').value
//this place im not sure if i have to add code to display male or female on a webpage
        }
}

但是......你真的吗？答案是＆＃34; no＆＃34;。让我们分析代码（伪代码）：

如果没有选中任何性别单选按钮
1. 创建并显示错误消息
否则（已选中性别单选按钮）
1. 如果有错误消息：
  1. 隐藏错误消息
  2. 更新gender变量

正如您所看到的，即使您有一个标识为gender的元素并且该变量已初始化为与null不同的有效值，也永远不会更新gender的值变量到已检查的性别单选按钮的值，除非您首先犯了错误！。

解决方案很简单：将更新从if移到if之外（步骤2.1.2到步骤2.2）。代码如下所示：

if(document.querySelector('input[name = "gender"]:checked') == null){
    fieldsValid = false;
    if(!document.getElementById("genderErrMsg")) {
        var errMsg = document.createElement("span"); 
        errMsg.id = "genderErrMsg"; 
        errMsg.appendChild(document.createTextNode("*Gender is required"));
        document.getElementById("genderId").appendChild(errMsg);
    }
} 
else {
        var toRemove = document.getElementById("genderErrMsg");;
        if(toRemove){
            toRemove.parentNode.removeChild(toRemove);
        }
        gender = document.querySelector('input[name = "gender"]:checked').value
}

如果我是正确的（再次，这是一个猜测），这应该可以解决你的问题。

性别在网页上显示为null但我希望它显示男性或女性

1 个答案: