Question

使用Javascript我想通过单击按钮创建一个新的输入文本。这是我的代码：

<section id="poststarring">
    <script type="text/javascript">
        var counter = 2;
        function newactor(){
           document.getElementById("actorinput").innerHTML += '<input type="text" name="starring"' + counter + ' value="actor" class="starring"> <span>as</span> <input type="text" name="as"' + counter + ' value="character" class="character">';
           counter += 1; 
           return false;
        }
    </script>
    <section id="actorinput">
        <input type="text" name="starring1" value="actor" class="starring"> <span>as</span> <input type="text" name="as1" value="character" class="character">
    </section>
    <button onclick="newactor()">Add another actor</button>
</section>

发现这个代码有一个更大的形式，可以正常工作，上面是一段php。

当我点击按钮时，新输入会出现一秒钟并立即消失。我已经尝试了几件事：我已经有了不同的javascript代码，我已经将javascript代码的位置改为了头。我发现研究这个问题的两个可能的问题 - 在函数中添加返回false，并确保按钮到目前为止没有帮助我。

Answer 1

表单中的<button>会提交表单，这就是为什么元素会立即消失，页面重新加载。

您从该函数返回false，但您可能想要

<button onclick="return newactor()">Add another actor</button>

因为你必须将false返回给处理程序。

Answer 2

您应该查看使用appendChild添加新元素，因为innerHTML将擦除值和可能附加的任何事件。

＆＃13;

        var counter = 2;
        function newactor(){
           var div = document.createElement("div");
           div.innerHTML += '<input type="text" name="starring"' + counter + ' value="actor" class="starring"> <span>as</span> <input type="text" name="as"' + counter + ' value="character" class="character">';
          document.getElementById("actorinput").appendChild(div);
           counter += 1; 
           return false;
        }

＆＃13;

<section id="poststarring">
    <section id="actorinput">
        <input type="text" name="starring1" value="actor" class="starring"> <span>as</span> <input type="text" name="as1" value="character" class="character">
    </section>
    <button onclick="newactor()">Add another actor</button>
</section>

＆＃13;

Answer 3

你可以像这样使用

document.getElementById("actorinput").appendChild( '<input type="text" name="starring"' + counter + ' value="actor" class="starring"> <span>as</span> <input type="text" name="as"' + counter + ' value="character" class="character">');

javascript中的新输入会在单击时出现并消失

3 个答案: