javadript内のappendChildを使用したときの問題

Question

javacript内に2つの関数、createtextとcreatetextareaがあります。 ボタンを最初にクリックしてcreatetext()にすると、テキストボックスが表示され、他の要素も正しく作成されます。

しかし、createtextarea()のボタンをクリックすると、createtext()までクリックするまでテキスト領域が表示されません。

私は...それは追加するそこにテキストボックスを取得した後、テキストエリアのみが表示されていると思います

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

コミュニティのwiki繰り返しコードを向上させるための：

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

あなたのコードのdidnのぞんざいな検査明らかなエラーを明らかにすることはできませんが、グローバルスコープで多くの変数を使用しているように見えるので、私たちが見ることのできない矛盾が常に存在する可能性があります。潜在的な問題の1つは、同じ変数を使用して両方のIDを生成するので、IDを再利用している可能性があります。あなたはの代わりにtextNNNという名前のテキストボックスを持つことでこれをテストできます。

それ以外は、FirebugをFirefoxで使用し、コードにいくつかのブレークポイントを設定して、割り当てられている値を確認することをお勧めします。それを超えて、属性値を提供するためにパラメータを使用して、小さくて再利用可能な関数（例えば、ラベルの作成、フィールドの作成など）をリファクタリングすることによって、コードを単純化する方法について考えることができます。 $（ 'hold'）はいくつかのフレームワークを使用しているように見えるので、あなたのフレームワークがよりエレガントな方法でDOM要素を作成する方法を持っているかどうかを知りたいかもしれません。

Answer 3

一部の要素にはラベルとボタンのような方法appendChild()がありません。私たちは、これらの要素を使用する場合や、よりIEは他のブラウザでメソッドやプロパティにアクセス

にエラーメッセージに

予期しないコールを生成し、彼らはIEよりも賢いです。彼らはコンテンツをレンダリングします。だから、appendChild()は、IEのラベルやボタンなどでうまく動作します。

簡単な解決策は