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 -->

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

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)"; }

Set the FormName


TextBox


TxtArea


My Form

Answer 1

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)";
}

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.