javascript variable returning null

Question

I am attempting to build a string of a user's "interests" that they indicate by checking off radio boxes. When I return the result, there is always an "undefined" prepended to the string of interests. I know that I can get rid of this issue by initializing var interest as an empty string, like so:

var interests ="";

But am unsure if this is the proper way to solve the issue. is there a more optimal data structure for this?

        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>

james emanon · Accepted Answer · 2014-11-25 02:46:27Z

2

I would turn your "interests" variable into an array.

var interests = [];

then I would just push into it, like so. When you want to print it out, just join it.

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

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

answered Nov 25, 2014 at 2:46

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ja͢ck Over a year ago

The question is whether using var interests =""; is a proper way to solve the issue. This answer seems to just reflect your own preference.

Ja͢ck · Accepted Answer · 2014-11-25 02:56:34Z

2

But am unsure if this is the proper way to solve the issue ...

Yes, initialising the variable as a string is the proper way to resolve this issue.

Basically, whenever you initialise your variable like this:

var interests;

The variable type is implicitly set to undefined, so when you apply += onto it, JavaScript changes the type to string with a value of "undefined". Setting the initial value prevents that:

var interests = '';

answered Nov 25, 2014 at 2:56

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

2 Comments

Geri Atric Over a year ago

Jack - thanks for your input - seems there are multiple ways to skin a cat…or at least define the undefined ;)

Ja͢ck Over a year ago

Yeah; btw, you can change the .innerHTML after the loop is done instead of inside each iteration.

Dnyanesh · Accepted Answer · 2014-11-25 03:15:46Z

0

I have tried to put same thing mentioned in above answers in code snippet for better understanding. In my opinion array suits here

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>

edited Nov 25, 2014 at 3:15

answered Nov 25, 2014 at 3:09

Dnyanesh

2,3633 gold badges20 silver badges17 bronze badges

2 Comments

Geri Atric Over a year ago

Either way "works" - an array is probably more "elegant' solution

Ja͢ck Over a year ago

@JoshKerbel An array makes sense in cases whereby you can benefit from how Array.join() works; e.g. insert a newline between every element but not at the start or end.

Collectives™ on Stack Overflow

javascript variable returning null

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related