Question

我正在尝试动态添加多个表单，并在生成表单时自动为每个“玩家”添加填充在表单中的数量。我已经能够成功创建输入，但是我不知道如何编写“添加”部分的代码。

也许我的代码可以更好地解释我的实践项目（这是一个个人练习项目，只能与朋友一起使用。）我的代码：

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
				container.appendChild(document.createElement("br"));
                container.appendChild(document.createTextNode("Jugador " + (i+1)));
				
                var input = document.createElement("input");
                input.type = "text";
                input.name = "Jugador" + i;
				container.appendChild(document.createElement("br"));
				input.value = "Nombre del Jugador " +(1+ i);
                container.appendChild(input);
				container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Puntuación de las rondas"));
				container.appendChild(document.createElement("br"));
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 1" + i;
				input.value = "1";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 2" + i;
				input.value = "2";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 3" + i;
				input.value = "3";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 4" + i;
				input.value = "4";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Total"));
				container.appendChild(document.createElement("br"));
				var s = document.createElement("script");
				s.
				container.appendChild(document.createElement("br"));
            }
        }
    </script>
<style>
.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:12px 21px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

<title>Galle -GO- Web App</title>
</head>
<body>
<b>Número de jugadores:</b>
  <input type="text" id="member" name="member" value="2"><br /><br />
    <a href="#" id="filldetails" onclick="addFields()" class="myButton">Generar Partida</a>
    <div id="container"/><br />

</body>
</html>

Answer 1

有两个错字。

一个原因问题是最后一个之前有一个额外的s（错字） container.appendChild。
第二，您还没有像div一样关闭<\div>。但是我想这不会引起问题。只是一个观察。

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
				container.appendChild(document.createElement("br"));
                container.appendChild(document.createTextNode("Jugador " + (i+1)));
				
                var input = document.createElement("input");
                input.type = "text";
                input.name = "Jugador" + i;
				container.appendChild(document.createElement("br"));
				input.value = "Nombre del Jugador " +(1+ i);
                container.appendChild(input);
				container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Puntuación de las rondas"));
				container.appendChild(document.createElement("br"));
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 1" + i;
				input.value = "1";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 2" + i;
				input.value = "2";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 3" + i;
				input.value = "3";
                container.appendChild(input);
				var input = document.createElement("input");
                input.type = "Number";
                input.name = "Ronda 4" + i;
				input.value = "4";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
				container.appendChild(document.createTextNode(" Total"));
				container.appendChild(document.createElement("br"));
				var s = document.createElement("script");
				container.appendChild(document.createElement("br"));
            }
        }
    </script>
<style>
.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:12px 21px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

<title>Galle -GO- Web App</title>
</head>
<body>
<b>Número de jugadores:</b>
  <input type="text" id="member" name="member" value="2"><br /><br />
    <a href="#" id="filldetails" onclick="addFields()" class="myButton">Generar Partida</a>
    <div id="container"></div><br />

</body>
</html>

如何动态创建字段并自动添加填充字段的值

1 个答案: