如何在 JavaScript 中进行表单字段重复

How to do form field repetition in JavaScript?

本文关键字：表单 字段 JavaScript      更新时间：2023-09-26

我得到了一个表格，上面有一个游戏列表，我要求人们添加他们玩过的游戏。

它说"添加游戏"，带有一个超链接，该超链接具有指向 JavaScript 函数的事件处理程序 onClick - 它只执行此操作一次，但我希望它在用户决定添加游戏时多次执行此操作 - 没有任何限制 - 如何做到这一点？

下面是屏幕截图图像，后跟代码：

http://i59.tinypic.com/16jk1nt.png

http://i59.tinypic.com/2zzntoo.png

以下是上述图像的 JavaScript 代码：

function addFields1(){
        var container = document.getElementById("container1");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
            container.appendChild(document.createTextNode("Add Game"));
            var input = document.createElement("input");
            input.type = "text";
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
    }

以下是上述 JavaScript 代码的 HTML 表单：

    <input type="text" id="member1" name="member1" value="">Add Game<br />
<a href="#" id="filldetails" onclick="addFields1()">Add Game</a>
    <div id="container1"/>
当我单击"添加游戏"超链接时，它

只输入一次空白输入框，而我希望它输入的次数与我继续单击"添加游戏"超链接一样多。另外，我希望每次单击"添加游戏"超链接时都会复制该链接。

<html>
    <script>
        function addFields1(){
            var container = document.getElementById("container1");
            //remove button
            var addGameButton = document.getElementById("filldetails");
            container.removeChild(addGameButton);
            //create and insert input/text
            var input = document.createElement("input");
            input.type = "text";
            container.appendChild(input);
            container.appendChild(document.createTextNode("Add Game"));
            container.appendChild(document.createElement("br"));
            //create and insert button
            addGameButton = document.createElement("a");
            addGameButton.id="filldetails"
            addGameButton.href="#";
            addGameButton.onclick=function(){addFields1();};
            addGameButton.text="Add Game";
            container.appendChild(addGameButton);
        }
    </script>
    <body>
        <form>
            <div id="container1">
                <input type="text" id="member1" name="member1" value="">Add Game<br />
                <a href="#" id="filldetails" onclick="addFields1()">Add Game</a>
            </div>
        </form>
    </body>
</html>
相关文章：