我试图让代码在添加第七个文本框之前和添加后工作。
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Words</title>
</head>
<body>
<script type="text/javascript">
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
}
function concatenate()
{
concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + " " + document.getElementById("tb7").value;
document.getElementById("concateForm").value = concateText;
}
</script>
<h1>Please enter text into the fields below</h1>
<table>
<tr>
<td>
<input type="text" id="tb1">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb2">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb3">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb4">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb5">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb6">
</td>
</tr>
<tr>
<td>
<div id="newBut">
</td>
</tr>
<tr>
<td>
<input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
</td>
</tr>
<tr>
<td>
<input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
</td>
</tr>
</table>
</body>
我遇到的问题是，只有通过单击底部的按钮添加第七个文本框后，代码才有效。我想知道是否可以在不添加额外框到 html 代码中的情况下获得相同的功能。
最佳答案
因为您有 tb7 框的具体选择器，所以在尝试获取值时会抛出异常。这就是为什么您需要第七次才能显示结果。您最好使用 document.getElementsByClassName 来实现这种动态。并枚举列表以执行串联。
作为替代方案，通过切换到 jQuery 并使用选择器和 .each() function 可以使这变得非常简单。 .
示例:
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7' class='concatInput'>";
}
function concatenate()
{
var elements = document.getElementsByClassName("concatInput");
var concatText = "";
for (i = 0; i < elements.length; i++)
{
concatText += elements[i].value;
}
document.getElementById("concateForm").value = concateText;
}
关于javascript - 使用 Javascript 连接文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41489032/