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>

Answer 1

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.