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

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代码的位置更改为头部。我在研究这个问题时发现的两种可能的解决方案 - 在函数中添加 return false 并确保按钮没有出现，到目前为止对我没有帮助。

Answer 1

一个<button>在表单内提交表单，这就是元素立即消失、页面重新加载的原因。

你从函数中返回 false，但你可能想要这样做

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

因为您必须返回 false也返回处理程序。