How do I fix createTextNode's value being undefined when there was a value previously in it?

Question

I am struggling with how to store/save a text node's value which is crucial to solving my problem. Basically, it resolves around select option menus. I debugged the program line by line and found that after the function onChange() is done and I go back in onChange() function to change a select option, all four text nodes' values are undefined and does not keep the previous values that was stored when I first .createTextNode. Oddly enough, iterationCount is still stored though. The reason I'm doing this is because createTextNode tends to print repeatedly result everytime I make change to select option. So I did this to avoid that from happening:

if(iterationCount === undefined) // used on first launch
{
    iterationCount = 0; // set the value to 0
}

//iterationCount > 0 (on second or more tries), allow permission to remove the pNodes
if(iterationCount > 0)
{
    pNodeBudget.removeChild(pTextBudget);
    pNodeBrand.removeChild(pTextBrand);
    pNodeType.removeChild(pTextType);
    pNodeLens.removeChild(pTextLens);
    iteration--; // put it back to 0 right after removing the pNodes.
}

And this code is basically where I create the Text Nodes:

// iteration Count == 0 (first try), allow create text node
if(iterationCount == 0)
{
    var pNodeBudget = document.createElement("p");
    var pNodeBrand = document.createElement("p");
    var pNodeType = document.createElement("p");
    var pNodeLens = document.createElement("p");

    var pTextBudget, pTextBrand, pTextType, pTextLens;
    pTextBudget = document.createTextNode("Your DSLR budget range selected was: " + budText);
    pTextBrand = document.createTextNode("The DSLR brand you selected was: " + brandText);
    pTextType = document.createTextNode("The type of photography you selected was: " + typeText);

    pTextLens = document.createTextNode("The type of lenses you selected was: " + lensText);                                

    // append text to paragraph
    pNodeBudget.appendChild(pTextBudget);
    pNodeBrand.appendChild(pTextBrand);
    pNodeType.appendChild(pTextType);
    pNodeLens.appendChild(pTextLens);
    // remove pNodes and append changes again
    // append to document page
    result.appendChild(pNodeBudget);
    result.appendChild(pNodeBrand);
    result.appendChild(pNodeType);
    result.appendChild(pNodeLens);
    resultForm = document.getElementById("resultForm").style.display = "block";
    iterationCount++; // 1 increment after one time, do something different
}

Full JavaScript Code:

        var result;
        var budSel, budList, budText;
        var brandSel, brandList, brandText;
        var typeSel, typeList, typeText;
        var lensSel, lensList, lensText;
        var brandForm, typeForm, lensForm;
        var iterationCount;

        function DSLRinit()
        {
            // set Select value to Select one onload() page
            var setSelect = document.getElementById("budgetSel").selectedIndex = "0";
            setSelect = document.getElementById("brandSel").selectedIndex = "0";
            setSelect = document.getElementById("typeSel").selectedIndex = "0";
            setSelect = document.getElementById("lensSel").selectedIndex = "0";

            brandForm = document.getElementById("brandForm").style.display = "none";
            typeForm = document.getElementById("typeForm").style.display = "none";
            lensForm = document.getElementById("lensForm").style.display = "none";
            var resultForm = document.getElementById("resultForm").style.display = "none";

            // dynamically create the select options onload()

            budSel = document.getElementById("budgetSel");
            budSel.options[0] = new Option("Select One");
            budSel.options[1] = new Option("< $500");
            budSel.options[2] = new Option("< $1000");
            brandSel = document.getElementById("brandSel");
            brandSel.options[0] = new Option("Select One");
            brandSel.options[1] = new Option("Canon");
            brandSel.options[2] = new Option("Nikon");
            brandSel.options[3] = new Option("Sony");
            brandSel.options[4] = new Option("Pentax");
            typeSel = document.getElementById("typeSel");
            typeSel.options[0] = new Option("Select One");
            typeSel.options[1] = new Option("Wildlife");
            typeSel.options[2] = new Option("Aerial");
            typeSel.options[3] = new Option("Sports");
            typeSel.options[4] = new Option("Portrait");
            typeSel.options[5] = new Option("Architectural");
            typeSel.options[6] = new Option("Macro");
            lensSel = document.getElementById("lensSel");
            lensSel.options[0] = new Option("Select One");
            lensSel.options[1] = new Option("Normal \"Portrait\" Lens / 35-50mm");
            lensSel.options[2] = new Option("Telephoto Zoom Lens / > 200mm");
            lensSel.options[3] = new Option("Ultra-Wide Angle Lens / < 35mm");
        }

        // function to dynamically change user selected options
        function onChange()
        {
            result = document.getElementById("result"); // get the <form> element id

            budgetForm = document.getElementById("budgetForm").style.display = "block";



            budSel = document.getElementById("budgetSel"); // get the budget <select>
            budList = budSel.options.selectedIndex; // get the selected option index of budget select
            budText = budSel.options[budList].text; // get the text of the selected option of budget element

            if(budList == 1 || budList == 2)
            {
                // print the results into the result form


                //result.innerHTML = "<p>Your DSLR budget range selected was: " + budText + "</p>";
                //result.appendChild(result);

                brandForm = document.getElementById("brandForm").style.display = "block";
                //brandForm = document.getElementById("brandForm").style.margin = "-100px";

                brandSel = document.getElementById("brandSel"); // get the brand <select>
                brandList = brandSel.options.selectedIndex; // get the selected option index of brand select
                brandText = brandSel.options[brandList].text; // get the text of the selected option of brand element

                if(brandList == 1 || brandList == 2 || brandList == 3 || brandList == 4)
                {
                    // print the results into the result form
                    //result.innerHTML += "<p>The DSLR brand you selected was: " + brandText + "</p>";

                    typeForm = document.getElementById("typeForm").style.display = "block";

                    typeSel = document.getElementById("typeSel"); // get the type <select>
                    typeList = typeSel.options.selectedIndex; // get the selected option index of type select
                    typeText = typeSel.options[typeList].text; // get the text of the selected option of type element

                    if(typeList == 1 || typeList == 2 || typeList == 3 || typeList == 4 || typeList == 5 || typeList == 6 || typeList == 7)
                    {
                        // print the results into the result form
                        //result.innerHTML += "<p>The type of photography you selected was: " + typeText + "</p>";
                        //result.

                        lensForm = document.getElementById("lensForm").style.display = "block";

                        lensSel = document.getElementById("lensSel"); // get the lens <select>
                        lensList = lensSel.options.selectedIndex; // get the selected option index of lens select
                        lensText = lensSel.options[lensList].text; // get the text of the selected option of lens element

                        if(lensList == 1 || lensList == 2 || lensList == 3)
                        {
                            // print the results into the result form
                            //result.innerHTML += "<p>The type of lenses you selected was: " + lensText + "</p>";

                            // display the printed results
                            // create <p></p> node
                            //var pNodeBudget, pNodeBrand, pNode

                            //var linebreak = document.createElement("br");
                            // detect how many times changes were being made
                            if(iterationCount === undefined) // used on first launch
                            {
                                iterationCount = 0; // set the value to 0
                            }

                            //iterationCount > 0 (on second or more tries), allow permission to remove the pNodes
                            if(iterationCount > 0)
                            {
                                pNodeBudget.removeChild(pTextBudget);
                                pNodeBrand.removeChild(pTextBrand);
                                pNodeType.removeChild(pTextType);
                                pNodeLens.removeChild(pTextLens);
                                iteration--; // put it back to 0 right after removing the pNodes.
                            }
                            // iteration Count == 0 (first try), allow create text node
                            if(iterationCount == 0)
                            {
                                var pNodeBudget = document.createElement("p");
                                var pNodeBrand = document.createElement("p");
                                var pNodeType = document.createElement("p");
                                var pNodeLens = document.createElement("p");

                                var pTextBudget, pTextBrand, pTextType, pTextLens;
                                pTextBudget = document.createTextNode("Your DSLR budget range selected was: " + budText);
                                //linebreak.appendChild(pTextBudget);
                                pTextBrand = document.createTextNode("The DSLR brand you selected was: " + brandText);
                                //linebreak.appendChild(pTextBrand);
                                pTextType = document.createTextNode("The type of photography you selected was: " + typeText);
                                //linebreak.appendChild(pTextType);
                                pTextLens = document.createTextNode("The type of lenses you selected was: " + lensText);                                
                                //linebreak.appendChild(pTextLens);
                                // append text to paragraph
                                pNodeBudget.appendChild(pTextBudget);
                                pNodeBrand.appendChild(pTextBrand);
                                pNodeType.appendChild(pTextType);
                                pNodeLens.appendChild(pTextLens);
                                // remove pNodes and append changes again


                                // append to document page
                                result.appendChild(pNodeBudget);
                                result.appendChild(pNodeBrand);
                                result.appendChild(pNodeType);
                                result.appendChild(pNodeLens);
                                resultForm = document.getElementById("resultForm").style.display = "block";

                                iterationCount++; // 1 increment after one time, do something different
                            }
                        }
                    }
                }
            }

HTML Code:

Finest DSLR Selections...

        <div id="selForm">
            <form id="budgetForm">
                <!--show a large print of green font color and size money-->
                Select your DSLR budget range:
                <select id="budgetSel" onChange="onChange();">
                    <!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
                    <option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">&lt; $500</option>
                    <option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">&lt; $1000</option>-->
                </select>
            </form>

            <form id="brandForm">
                <!--Show images of the company one by one (fade in, fade out)-->
                Select the DSLR brand you want:
                <select id="brandSel" onChange="onChange();">
                    <!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
                    <option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
                    <option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
                    <option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
                    <option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
                </select>
            </form>

            <form id="typeForm">
                <!--Show stunning beautiful pictures of each type of photography-->
                <!--Select multiples by click CTRL + Left-Click on mouse.-->
                Select the type of photography you plan on doing with a DSLR:
                <select id="typeSel" onChange="onChange();">
                    <!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
                    <option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
                    <option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
                    <option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
                    <option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
                    <option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
                    <option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
                    <option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
                </select>
            </form>

            <form id="lensForm">
                Select the type of lenses you want:
                <select id="lensSel" onChange="onChange();">
                    <!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
                    <option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal &ldquo;Portrait&rdquo; Lens / 35-50mm</option>
                    <option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / &gt; 200mm</option>
                    <option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / &lt; 35mm</option>-->
                </select>
            </form>
        </div>

        <div id="resultForm">
            <h1>Your DSLR Selections...</h1>
            <form id="result" onsubmit="true">
                <!--Store User Selection Text Node Element Here-->
                <!--<p>Your DSLR budget range selected was:</p>
                <p>The DSLR brand you selected was:</p>
                <p>The type of photography you selected was:</p>
                <p>The type of lenses you selected was:</p>
                <input type="submit" value="Confirm Purchase"/>
                <input type="button" value="Reset All"/>-->
            </form>
        </div>
    </div>
</body>

You really need to distill your problem down to a particular piece of code and then ask a more specific question. It is really not clear what you're asking for help with. You might start with a mini-description of your HTML and what you're trying to accomplish. — jfriend00, Mar 06 '14 at 21:58
I didn't ask for full code with HTML. I asked you to distill your question down to a clear, concise question that is about a small piece of code and a small piece of relevant HTML and to describe what you're trying to accomplish. — jfriend00, Mar 06 '14 at 22:09
It's still not very specific, but I made a guess and added an answer. You should direct people to a few specific lines of code that you are asking about. And, in the future, please don't put your question in the title of the question. I read your question over and over again and couldn't find the actual question. Eventually I realized it was in the title. — jfriend00, Mar 06 '14 at 22:21

jfriend00 · Accepted Answer · 2014-03-06T22:26:05.073

It is still very difficult to tell what you're asking. If you post lots of code, please direct out attention to a specific line of code in that block of code that you're asking about.

My wild guess for what's going on is that when you create text nodes in this block of code:

var pTextBudget, pTextBrand, pTextType, pTextLens;
pTextBudget = document.createTextNode("Your DSLR budget range selected was: " + budText);
//linebreak.appendChild(pTextBudget);
pTextBrand = document.createTextNode("The DSLR brand you selected was: " + brandText);
//linebreak.appendChild(pTextBrand);
pTextType = document.createTextNode("The type of photography you selected was: " + typeText);
//linebreak.appendChild(pTextType);
pTextLens = document.createTextNode("The type of lenses you selected was: " + lensText);                                
//linebreak.appendChild(pTextLens);
// append text to paragraph
pNodeBudget.appendChild(pTextBudget);
pNodeBrand.appendChild(pTextBrand);
pNodeType.appendChild(pTextType);
pNodeLens.appendChild(pTextLens);
// remove pNodes and append changes again

You are assigning the text nodes to local variables. Those variables ONLY exist for the during of this function. They will not retain their values until the next time you call this function. If you need them to retain their values, then you should declare those variables as global variables (outside the function) and NOT declare them inside the function at all.

In other words, if you want the variables to retain their values, then move this line:

 var pTextBudget, pTextBrand, pTextType, pTextLens;

to outside of the onChange() function so the variables are defined in a scope that survives from one call to your function to the next. Local variables (variables declared with var inside a function) ONLY exist for the duration of that one invocation of the function. After the function finishes, those variables are destroyed and the next time the function is called, new ones are created.

Now all that said, there is almost never a good reason to store DOM references to text nodes in global variables. You generally locate text nodes inside of <span> or <div> elements that contain ids or class names and you use DOM queries to find a given node when you need it. Code tends to be a lot, lot cleaner when written that way. I really have no idea what the point of your code is without spending hours trying to understand it so I can't recommend a specific way for you to rewrite/restructure your code to work this better way.

Yes, your assumption was 100% correct of what I was looking for, however it doesn't fully function the way it was suppose to. I'm sorry for not being clear initially. I would love for you to show me the correct way of working with Text Nodes in and
. The full code is here. Please feel free to copy and paste, if you can, into a text editor and select any four options and then the results that used text nodes will show up. Then, change any option and you'll notice the problem with text nodes as I stated above. http://pastebin.com/8b4Qndye — TheAmazingKnight, Mar 07 '14 at 01:11
@TheAmazingKnight - if you can put your code in to a jsFiddle and make it function and post that link, then it will be a lot easier to see what you're trying to do and debug it for you. — jfriend00, Mar 07 '14 at 01:13
@TheAmazingKnight - I have to run now for awhile, but check out this version of your code: http://jsfiddle.net/jfriend00/M7Zsr/. Your code can be simplified a lot, lot more. Note the couple utility routines I wrote which removed a ton of duplicate code. In concept, rather than keep track of the text nodes, I just clear the previous content and create new content each time. Much simpler. No global variables. No `iterationCount`. — jfriend00, Mar 07 '14 at 02:47
Wow, your code is so simplified that I'd like to utilize your way of doing javascript. I'm just learning it for about a month now for a client programming course. I'm eagar to learn more javascript, though. Thanks for your solutions! I'm going to try to get those two buttons (`submitBtn` and `resetBtn`) to appear as they currently don't appear after the result is shown. — TheAmazingKnight, Mar 07 '14 at 04:27
@TheAmazingKnight - See how the simplification of `DSLRinit()` looks now in http://jsfiddle.net/jfriend00/M7Zsr/. — jfriend00, Mar 07 '14 at 06:45
I noticed you use a for loop for each function, it is much more efficient to do it this way, then what I had before. I read your code thoroughly and began to understand what you did vs. mine. I'd like to use your code and implement it into mine, of course, given you credit! — TheAmazingKnight, Mar 07 '14 at 22:23

How do I fix createTextNode's value being undefined when there was a value previously in it?

Finest DSLR Selections...

1 Answers1