javascript变量返回null

Question

我试图建立一个用户的“兴趣”，他们通过检查收音机框指示的字符串。当我返回结果时，总是有一个“未定义”的字符串前缀。我知道我可以通过初始化VAR利益为空字符串，像这样摆脱这个问题的：

var interests =""; 

，但我不能确定这是否是解决问题的正确方法。有没有更好的数据结构呢？

 var controlIndex; 
     var element; 
     var interests; 
     var numberOfControls = document.form1.length; 

     for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++) 

      { 
       element = document.form1[controlIndex]; 
       if (element.type == "radio") 
       { 
        if (element.checked == true) 
        { 

        interests += document.form1[controlIndex].value+"\n"; 


        console.log(interests); 
        document.getElementById("interests").innerHTML= interests 
        } 
       } 
      } 

     } 


    } 



<form action="" name="form1"> 
     <h1>Personal Details</h1> 
     Please enter the following details: 
     <br> 
     <p> 
     First Name: 
     <br /> 
     <input type="text" name="txtName" onchange="txtName_onchange()"/> 
     </p> 

     <p> 
     Age: 
     <br /> 
     <input type="text" name="txtAge" size="3" maxlength="3" onchange="textAge_onblur()" /> 
     </p> 
     <p> 
     My interest is: 
     <p>Sports 
     <input type="radio" name="sports" value="sports"/> 
     </p> 
     <p>Politics 
     <input type="radio" name="politics" value="politics" /> 
     </p> 
     <p>Magazines 
     <input type="radio" name="magazines" value="magazines"> 
     </p> 
     <p> 
     <input type="button" value="Submit Registration" name="btnCheckForm" onclick="btnCheckForm_onclick()" > 
     <input type = "button" value = "Clear Details" name="btnClear" onclick="btnClear_onclick()"> 
     </p> 
    </form> 
    </div> 

Answer 1

我会变成你的 “利益” 变量到一个数组。

var interests = []; 

然后我只是将它推入，像这样。当你想打印出来，只需加入它。

   interests.push(document.form1[controlIndex].value); 

      console.log(interests.join("")); 

Answer 2

，但我不能确定这是否是解决问题的正确方法...

是，初始化变量为一个字符串，是解决这一问题的正确方法。

基本上，只要你初始化你这样的变量：

var interests; 

变量的类型被隐含设置为undefined，所以当你申请+=到它，JavaScript的改变与"undefined"值类型为字符串。设置初始值可防止：

var interests = ''; 

Answer 3

我试图将上述答案中提到的相同内容放在代码片段中以便更好地理解。在我看来阵列西服这里

function btnCheckForm_onclick(){ 
 
var controlIndex; 
 
     var element; 
 
     //Case with '' intitlization 
 
     var interests = ''; 
 
     
 
     //Case with [] intitlization 
 
     var interests = []; 
 
     
 
     var numberOfControls = document.form1.length; 
 

 
     for (controlIndex = 1; controlIndex < numberOfControls; controlIndex++) 
 

 
      { 
 
       element = document.form1[controlIndex]; 
 
       if (element.type == "radio") 
 
       { 
 
        if (element.checked == true) 
 
        { 
 
        // Case with [] 
 
        //interests.push(document.form1[controlIndex].value); 
 
        //console.log(interests.join(" ")); 
 
        
 
        //Case with '' 
 
        interests += document.form1[controlIndex].value+"\n"; 
 
        console.log(interests); 
 
         
 
        } 
 
       } 
 
      } 
 
    
 
    document.getElementById("interests").innerHTML= interests 
 

 
}

<form action="" name="form1"> 
 
     <h1>Personal Details</h1> 
 
     Please enter the following details: 
 
     <br> 
 
     <p> 
 
     First Name: 
 
     <br /> 
 
     <input type="text" name="txtName" onchange="txtName_onchange()"/> 
 
     </p> 
 

 
     <p> 
 
     Age: 
 
     <br /> 
 
     <input type="text" name="txtAge" size="3" maxlength="3" onchange="textAge_onblur()" /> 
 
     </p> 
 
     <p> 
 
     My interest is: 
 
     <p>Sports 
 
     <input type="radio" name="sports" value="sports"/> 
 
     </p> 
 
     <p>Politics 
 
     <input type="radio" name="politics" value="politics" /> 
 
     </p> 
 
     <p>Magazines 
 
     <input type="radio" name="magazines" value="magazines"> 
 
     </p> 
 
      
 
     <p> 
 
     <input type="button" value="Submit Registration" name="btnCheckForm" onclick="btnCheckForm_onclick()" > 
 
     <input type = "button" value = "Clear Details" name="btnClear" onclick="btnClear_onclick()"> 
 
     </p> 
 
    
 
    <div id="interests"></div>