Problem using appendChild in javascript

Question

I have two functions inside the javascript: createtext and createtextarea. If I first click on the button to createtext(), the textbox is shown and the other elements are also created correctly.

However, if I click on the button for createtextarea() the textarea is not shown until clicking to createtext().

I think textarea is only displayed after it gets a textbox there to append...

<!-- File: /app/views/posts/index.ctp -->

<?php echo $javascript->link('prototype');
echo $javascript->link('scriptaculous'); ?>


<!--script starts here -->

<script type="text/javascript">
var myForm;var fieldidctr=0;var labelidctr=0;
window.onload=function()
{
        // Create a form
    myForm = document.createElement('FORM');
    myForm.method = 'post';

    myForm.id = 'myForm';
        fieldidctr=1;
        labelidctr=1;

}

        function createtext()
        {

                txt1=document.createElement('input'); // Create an input element [textbox]
        label1=document.createElement('label');//create a label
            var tnode=document.createTextNode("click to edit label ");
        label1.appendChild(tnode);
        label1.onclick=function(){createLabel(tnode);}
        txt1.setAttribute('type','text'); // Set the element as textbox
        var txtid="field"+fieldidctr;
        fieldidctr++;

var link = document.createElement("A");
//link.href = "http://localhost/cake_1.2.1.8004/index.php/posts";
var atext = document.createTextNode("Remove");
link.appendChild(atext);

link.onclick=function(){$(txtid).parentNode.removeChild($(txtid));
                   $(labelid).parentNode.removeChild($(labelid));
myForm.removeChild(link);
               }



var labelid="labelid"+labelidctr;
labelidctr++;



        txt1.setAttribute('id',txtid);
label1.setAttribute('id',labelid);
        txt1.onchange=function(){var userInput = txt1.value;
            txt1.setAttribute('value',userInput);}
        myForm.appendChild(label1);
        myForm.appendChild(txt1);//add the textbox to the MyForm


myForm.appendChild(link);
        var e=$('hold');
        e.appendChild(myForm);
                myForm.onSubmit="save_field(this.txt1)";
        }
    function createLabel(myForm)
    {
        myForm.data=prompt("Enter the label name ");
    }
    function createtextarea()
        {
        txt2=document.createElement('textarea'); // Create an input element [textbox]
        label2=document.createElement('label');//create a label
        var tnode=document.createTextNode("click to edit label ");
        label2.appendChild(tnode);
        label2.onclick=function(){createLabel(tnode);}
        txt2.rows='10';
        txt2.cols='3';
        var txtid="field"+fieldidctr;
        fieldidctr++;


var labelid="labelid"+labelidctr;
labelidctr++;

var link = document.createElement("A");

var atext = document.createTextNode("Remove");
link.appendChild(atext);

link.onclick=function(){$(txtid).parentNode.removeChild($(txtid));
                   $(labelid).parentNode.removeChild($(labelid));
myForm.removeChild(link);
}


        txt2.setAttribute('id',txtid);
label2.setAttribute('id',labelid);
        txt2.onchange=function(){var userInput = txt2.value;
        var txtnode=document.createTextNode(userInput);
            txt2.appendChild(txtnode);
            }
        myForm.appendChild(label2);
        myForm.appendChild(txt2);//add the textarea to the MyForm

myForm.appendChild(link);
        var e1=$('hold');
        e.appendChild(myForm);
        myForm.onSubmit="save_field(this.txt2)";
    }

</script>

</div>

<table border=0><tr>

<td width="10%">

 <button style="width:10" onclick="javascript: setformname()">Set the FormName</button><br><br><br>
<button style="width:10" onclick="createtext();">TextBox</button><br><br><br>

<button style="width:10" onclick="createtextarea();">TxtArea</button><br><br><br>

</td>
<td width="75%">

<div id="hold">

<label id="myForm">My  Form </label>
</div></td>
</table>

Answer 1

Some element does not have the method appendChild() like labels and buttons. And when we use these elements, than IE generates the error message

Unexpected call to method or property access

In other browsers, they are smarter than IE. They render the content. That's why the appendChild() works fine for the labels, buttons etc. for the IE.

The simple solution is to use objects that support the appendChild() method like div, body and head instead of label etc.

Answer 2

A cursory examination of your code didn't reveal any obvious errors, though you seem to be using a lot of variables with global scope so it's always possible that you've got some conflicts that we can't see. One potential problem may be that you're reusing ids since you rely on the same variable to generate the ids for both. You could test this by having your textboxes named textNNN instead of fieldNNN.

Other than that, my recommendations would be to use Firebug in Firefox and set some breakpoints in the code to see what values are being assigned. Beyond that, you might want to think about how you could simplify your code by refactoring to smaller, reusable functions (say for creating a label, creating a field) using parameters to provide the attribute values. Since it appears you are using some sort of framework -- the $('hold') is idiomatic of several -- you might also want to see if your framework has a way to handle creating DOM elements in a more elegant manner.

Answer 3

Community wiki for iteratively improving the code:

function createtext()
{
    var txt1=document.createElement('input'); // Create an input element [textbox]
    var label1=document.createElement('label');//create a label
    var tnode=document.createTextNode("click to edit label ");
    label1.appendChild(tnode);
    label1.onclick=function(){createLabel(tnode);}
    txt1.setAttribute('type','text'); // Set the element as textbox
    var txtid="field"+fieldidctr;
    fieldidctr++;

    var link = document.createElement("A");
    //link.href = "http://localhost/cake_1.2.1.8004/index.php/posts";
    var atext = document.createTextNode("Remove");
    link.appendChild(atext);

    link.onclick=function()
    {
        $(txtid).parentNode.removeChild($(txtid));
        $(labelid).parentNode.removeChild($(labelid));
        myForm.removeChild(link);
    }



    var labelid="labelid"+labelidctr;
    labelidctr++;

    ////////


    txt1.setAttribute('id',txtid);
    label1.setAttribute('id',labelid);
    txt1.onchange=function(){var userInput = txt1.value;
    txt1.setAttribute('value',userInput);}
    myForm.appendChild(label1);
    myForm.appendChild(txt1);//add the textbox to the MyForm


    myForm.appendChild(link);
    var e=$('hold');
    e.appendChild(myForm);
    myForm.onSubmit="save_field(this.txt1)";
}

function createLabel(myForm)
{
    myForm.data=prompt("Enter the label name ");
}

function createtextarea()
{
    var txt2=document.createElement('textarea'); // Create an input element [textbox]
    var label2=document.createElement('label');//create a label
    var tnode=document.createTextNode("click to edit label ");
    label2.appendChild(tnode);
    label2.onclick=function(){createLabel(tnode);}
    txt2.rows='10';
    txt2.cols='3';
    var txtid="field"+fieldidctr;
    fieldidctr++;

    var labelid="labelid"+labelidctr;
    labelidctr++;

    var link = document.createElement("A");
    var atext = document.createTextNode("Remove");
    link.appendChild(atext);

    link.onclick=function()
    {
        $(txtid).parentNode.removeChild($(txtid));
        $(labelid).parentNode.removeChild($(labelid));
        myForm.removeChild(link);
    }

    ////////////////

    txt2.setAttribute('id',txtid);
    label2.setAttribute('id',labelid);
    txt2.onchange=function()
    {
        var userInput = txt2.value;
        var txtnode=document.createTextNode(userInput);
        txt2.appendChild(txtnode);
    }

    myForm.appendChild(label2);
    myForm.appendChild(txt2);//add the textarea to the MyForm

    myForm.appendChild(link);
    var e1=$('hold');
    e.appendChild(myForm);
    myForm.onSubmit="save_field(this.txt2)";
}