Question

我在javascript中有两个函数：createtext和createtextarea。如果我首先点击按钮createtext()，则会显示文本框，同时也会正确创建其他元素。

但是，如果我点击createtextarea()的按钮，则在点击createtext()之前不会显示textarea。

我认为只有在文本框附加后才会显示textarea ...

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

社区维基用于迭代改进代码：

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

粗略检查一下你的代码没有发现任何明显的错误，尽管你似乎在全局范围内使用了很多变量，所以你总是有可能遇到一些我们看不到的冲突。一个潜在的问题可能是您重复使用ID，因为您依赖相同的变量来为两者生成ID。您可以通过将文本框命名为textNNN而不是fieldNNN来测试。

除此之外，我的建议是在Firefox中使用Firebug并在代码中设置一些断点以查看正在分配的值。除此之外，您可能想要考虑如何通过使用参数提供属性值重构为较小的可重用函数（比如创建标签，创建字段）来简化代码。因为看起来你正在使用某种框架 - $（'hold'）是几个惯用的 - 你可能还想看看你的框架是否有办法以更优雅的方式处理创建DOM元素。

Answer 3

某些元素没有方法appendChild()，如标签和按钮。当我们使用这些元素时，IE会生成错误消息

意外调用方法或属性访问

在其他浏览器中，它们比IE更智能。他们渲染内容。这就是appendChild()适用于IE的标签，按钮等的原因。

简单的解决方案是使用支持appendChild()方法的对象，如div，body和head，而不是标签等。

在javascript中使用appendChild的问题

3 个答案: