Question

在我放一个按钮后添加三个输入文本字段时遇到问题。按下“添加作者”按钮后，我想要三个新的输入字段 - 这些输入将是：1。名称2.姓氏3.初始。每个人的新输入都需要有不同的ID才能从输入中获取文本并将其显示在新的子页面中，该子页面必须在我按下“下订单”按钮后立即显示。

<!DOCTYPE HTML> 
<html lang='en'> 
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/style.css'>

<script type="text/javascript">

window.onload = Load;

function Load()

{

document.getElementById('add_input').onclick = AddElement;

}

function AddElement()

{

var element = document.createElement('input');
var element2 = document.createElement('input');
var element3 = document.createElement('input');

element.setAttribute('type', 'text');
element.setAttribute('type', 'text');
element.setAttribute('type', 'text');
var number = 0;
var amount = document.forms['add_file'].elements.length;
for (var i = 0; i < ilosc; i++ )
{
if (document.forms['add_file'].elements[i].type == 'text')
{
number += 1;
}

}
element.setAttribute('name', 'file-'+(liczba+1));
element.setAttribute('nazwisko', 'file-'+(liczba+1));
element.style.display = "block";
element.style.margin= "2px";
document.forms['add_file'].appendChild(element);
}
</script>


<!--making order -->

<script>

function getText(){

var publisher = document.getElementById("publisher");
var year = document.getElementById("year"); 
var div = document.getElementById("readyorder")
div.innerHTML = "("+surname.value+" "+year.value+","+" "+"s."+" "+page.value+")";

}

</script>

</head>
<body>

<div class='container'>

<!-- header --> 
<header>
<img src="images/header.jpg" alt=""/>
</header>


<input type="text" name="file-1" />
<input type="text" name="surname-1" />
<input type="submit" value="Add author" id="add_input" />

<form name="add_file" enctype="multipart/form-data" method="post"> 
</form>


Author's Surname<br>
<input type="text" id="surname"><br>
Page number<br>
<input type="text" id="page"><br>
Year<br>
<input type="text" id="year"><br/>
<input type="submit" value="Make the order" onclick="getText()" /> <br/><br/>


<div id="readyorder"></div><br/>

</body>
</html>

Answer 1

存储您的id全球，并在每次添加时增加。

创建node时使用id

设置setAttribute值

element1.setAttribute('id', 'surname' + number);

在添加button的同时创建textbox's，让您了解当前的订单。

var button = document.createElement('input');

添加onclick属性以致电javascript function

button.setAttribute('onclick', 'getText(' + number + ')');

window.onload = Load;
var number = 0;

function Load()
{
	document.getElementById('add_input').onclick = AddElement;
}

function AddElement()
{
	var element1 = document.createElement('input');
	var element2 = document.createElement('input');
	var element3 = document.createElement('input');
	var label1 = document.createElement('label');
	var label2 = document.createElement('label');
	var label3 = document.createElement('label');
	var button = document.createElement('input');
	
	label1.innerHTML = "</br>Author's Surname " + number + "</br>";

	element1.setAttribute('type', 'text');
	element1.setAttribute('id', 'surname' + number);
	element1.setAttribute('placeholder', 'Surname...');
	label1.appendChild(element1);
	
	label2.innerHTML = '</br>Page number ' + number + '</br>';

	element2.setAttribute('type', 'text');
	element2.setAttribute('id', 'page' + number);
	element2.setAttribute('placeholder', 'Page...');
	label2.appendChild(element2);

	label3.innerHTML = '</br>Year ' + number + '</br>';

	element3.setAttribute('type', 'text');
	element3.setAttribute('id', 'year' + number);
	element3.setAttribute('placeholder', 'Year...');
	label3.appendChild(element3);
	
	button.setAttribute('onclick', 'getText(' + number + ')');
	button.setAttribute('type', 'button');
	button.setAttribute('value', 'Button ' + number);
	
	document.forms['add_file'].appendChild(label1);
	document.forms['add_file'].appendChild(label2);
	document.forms['add_file'].appendChild(label3);
	document.forms['add_file'].appendChild(button);
	number++;
}

function getText(id)
{
	var surname = document.getElementById("surname" + id);
	var page = document.getElementById("page" + id);
	var year = document.getElementById("year" + id);
	var div = document.getElementById("readyorder")
	div.innerHTML = "("+surname.value+" "+year.value+","+" "+"s."+" "+page.value+")";
}

<input type="text" name="file-1" />
<input type="text" name="surname-1" />
<input type="submit" value="Add author" id="add_input" />

<form name="add_file" enctype="multipart/form-data" method="post"> 
</form>

<hr>

<div id="readyorder"></div><br/>

JS - 如何添加三个输入，从中获取文本并在另一个子页面中显示文本

1 个答案: