javascript - 网页上的性别显示为空，但我希望它显示男性或女性

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 代码的情况下，这更多的是猜测，但我想我可以知道问题出在哪里......我想说它实际上有两个问题:

1. 您似乎有两个名为 gender 的单选按钮，但在代码顶部，您正在读取 id 为 gender 的元素的值:

   var gender = document.getElementById("gender");
   

   如果没有 ID 为 gender 的元素，则变量 sex 的值为 null，这就是您显示的内容。

2. 现在您可能会说“好吧，即使我犯了这个错误，我也不应该得到 null，因为我仍在更新 gender 的值本节中的变量":

   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
           }
   } 
   

   但是……你真的是这样吗？答案是不”。我们来分析一下代码(伪代码):

   1. 如果没有选中任何性别单选按钮
      1. 创建并显示错误消息
   2. Else(选中了性别单选按钮)
      1. 如果出现错误消息:
         1. 隐藏错误消息
         2. 更新gender变量的值

   如您所见，即使您有一个 id 为 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
   }
   

如果我是正确的(再次强调，这只是一个猜测)，应该可以解决您的问题。