javascript - 在 javascript 中动态生成表单 - 但是随着每个新字段的添加，先前字段的值都会丢失

标签 javascript html

我有一个 html (thymeleaf) 页面，它使用 javascript 向表单动态添加字段。不同的按钮添加具有不同默认值的字段。问题是，无论何时添加一个字段，它都会将所有先前字段的值设置为新字段的值。查看代码片段以明确问题。 

    var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
	clearTimeout(t);
    t = setTimeout(add, 1000);
}



/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
    
var count =0;    
function addFields(type){
	
	count = count + 1;
	
   
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for (i=0;i<count;i++){
    	container.appendChild(document.createTextNode("Type"));
        var input = document.createElement("input");
        input.type = "text";
        input.value = type;
        container.appendChild(input);
        container.appendChild(document.createTextNode("  Timestamp "));
        var input = document.createElement("input");
        input.type = "text";
        input.value = document.getElementById("time").textContent;
        container.appendChild(input);
        container.appendChild(document.createTextNode("  Details(optional)"));
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Match</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>

    
</head>
<body>
    <p th:text="'Match of ' + ${part1} + ' and ' + ${part2}"/>
<p id="demo"></p>

<table>

	<tr>
		<th>
			<p th:text="${part1}"/>
		</th>
		<th>
			<h1 id="time"><time >00:00:00</time></h1>
			<button id="start">start</button>
			<button id="stop">stop</button>
			<button id="clear">clear</button>
		</th>			
		<th>
			<p th:text="${part2}"/>
		</th>
	</tr>
	<tr>
		<td>
			<button onclick="addFields('Ippon')" >Ippon!</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Ippon')">Ippon!</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields('Wazari')" >Wazari</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Wazari')">Wazari</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields('Shido')" >Shido</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Shido')">Shido</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields(' ')" >Event</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields(' ')" >Event</button>
		</td>
	</tr>

</table>  
<br/>


    <div id="container"></div>
    
    


</body>

 

</html>

我知道每次运行 addField 方法时，它都会从头开始生成所有内容，丢失以前的值。然而，我真的很难想出变通的逻辑。

最佳答案

您不必要地使用了 while 和 for 循环以及变量 count。

使用 while，您将删除所有先前创建的元素。

再次使用 for 循环创建 n(count) -> 您单击任何按钮的次数 元素。

只需删除它们。

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
	clearTimeout(t);
    t = setTimeout(add, 1000);
}



/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
    
var count =0;    
function addFields(type){
	
	/*count = count + 1;*/
	
   
    var container = document.getElementById("container");
    /*while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }*/
    /*for (i=0;i<count;i++){*/
    	container.appendChild(document.createTextNode("Type"));
        var input = document.createElement("input");
        input.type = "text";
        input.value = type;
        container.appendChild(input);
        container.appendChild(document.createTextNode("  Timestamp "));
        var input = document.createElement("input");
        input.type = "text";
        input.value = document.getElementById("time").textContent;
        container.appendChild(input);
        container.appendChild(document.createTextNode("  Details(optional)"));
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    /*}*/
}
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Match</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>

    
</head>
<body>
    <p th:text="'Match of ' + ${part1} + ' and ' + ${part2}"/>
<p id="demo"></p>

<table>

	<tr>
		<th>
			<p th:text="${part1}"/>
		</th>
		<th>
			<h1 id="time"><time >00:00:00</time></h1>
			<button id="start">start</button>
			<button id="stop">stop</button>
			<button id="clear">clear</button>
		</th>			
		<th>
			<p th:text="${part2}"/>
		</th>
	</tr>
	<tr>
		<td>
			<button onclick="addFields('Ippon')" >Ippon!</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Ippon')">Ippon!</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields('Wazari')" >Wazari</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Wazari')">Wazari</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields('Shido')" >Shido</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields('Shido')">Shido</button>
		</td>
	</tr>
		<tr>
		<td>
			<button onclick="addFields(' ')" >Event</button>
		</td>
		<td>
			
		</td>
		<td>
			<button onclick="addFields(' ')" >Event</button>
		</td>
	</tr>

</table>  
<br/>


    <div id="container"></div>
    
    


</body>

 

</html>

关于javascript - 在 javascript 中动态生成表单 - 但是随着每个新字段的添加，先前字段的值都会丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48910307/

上一篇：javascript - 使用 Redux 创建倒数计时器

下一篇：javascript - 如何在 React Native 中强行卸载组件？

相关文章：

javascript - 在循环vuejs中加载特定的div

javascript - react : How can I dynamically render images mapping through a list?

javascript - Google 如何在搜索引擎结果页面上呈现其结果

javascript - 我想创建一个循序渐进的订单，这就是我目前所拥有的

javascript - 如何重新初始化 Owl Carousel 2.0？

css - 如何将两个 DIV 垂直堆叠在另外两个水平 DIV 旁边？

html - 连续得到 10 个二次方 block

javascript - 创建网站时指定引用内容的文档

html - 在谷歌浏览器下，蓝色边框线显示

python - 过滤掉 HTML 标签并解析 python 中的实体

©2024 IT工具网  联系我们