Question

我希望用户点击按钮，然后会出现一个表单。但无论按下此按钮多少次，都会出现一个表格。按顺序一个接一个地创建它们。我想用JavaScript实现。

我不是专业人士，我在教自己。只是想知道我是否让我们说：

<button id="new"><span class="glyphicon glyphicon-plus"> Add New Add-on</span></button>

有可能吗？凭借我所读到的，我想到了这一点。但正如我预期的那样它不起作用。

<input type="button" id="new" name="new" value="Add New Add-On" class="btn" onclick="addFields()">

<div id="New_Form"/>

</div>

<script>
    function addFields(){
        var button = document.getElementById("new").value;
        var container = document.getElementById("New_Form");
        while (New_Form.hasChildNodes()) {
            New_Form.removeChild(New_Form.lastChild);
        }
        for (i=0;i<number;i++){
            New_Form.appendChild(document.createTextNode("new " + (i+1)));
            var input = document.createElement("input");
            input.type = "button";
            New_Form.appendChild(input);
            New_Form.appendChild(document.createElement("br"));
        }
    }  
</script>

Answer 1

您的“唯一”错误是您尝试错误地访问div。此外，没有指定“数字”，所以没有发生任何事情。

我解决了这个问题并在整个过程中评论了我/你的代码。请注意，我可能无法正确理解您的问题。您可以自由地进一步询问并说明您的需求。从我的角度来看，到目前为止这个脚本有点无用。但继续学习！

<input type="button" id="new" name="new" value="Add New Add-On" class="btn" onclick="addFields()">

<div id="New_Form"/>
    <!--- Here goes the new form! -->
</div>

<script>
    function addFields(){
        // What did you want to accomplish here?
        //var button = document.getElementById("new").value;
        // You save the div with id "New_Form" into the variable container
        var container = document.getElementById("New_Form");
        // Now, why not use it then? :)
        while (container.hasChildNodes()) {
          // Removes all childs. NOTE: This will cause just one(!) form to appear in total!
            container.removeChild(container.lastChild);
        }
        // Number?? You need to specify some value here. I take 10 as an example.
        for (i=0; i < 10; i++) {
          // Again, use "container"
            container.appendChild(document.createTextNode("new " + (i+1)));
            var input = document.createElement("input");
            input.type = "button";
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        }
    }
</script>

在onclick上动态添加输入元素

1 个答案: