Question

我需要使用div元素显示输入到多个文本字段的数据。每个文本输入都应该有一个专用的div。

我环顾四周，我发现了如何创建动态输入。但它们都没有解释如何使用创建的字段来读取信息并显示信息

我更新了代码以输出两个单独的文本字段，但是它们一起显示却无效。

function display_array()
{
   var array=document.getElementsByClassName('tb');
   var e = "<hr/>";
var array2=document.getElementsByClassName('tb2');
  var e2 = "<hr/>";   
    
   for (var y=0; y<array.length; y++)
   {
     e += array[y].value ''+'' e2 += array2[y].value;
	// e2 += "Mac " + y + " = " + array2[y].value;
   }
document.getElementById("Result").innerHTML = e + 'm' + e2;
//document.getElementById("Result2").innerHTML = e;
}
//Counter to maintain number of textboxes and give them unique id for later reference
var intTextBox = 0;
var intTextBox2 = 0;
/**
* Function to add textbox element dynamically
* First we incrementing the counter and creating new div element with unique id
* Then adding new textbox element to this div and finally appending this div to main content.
*/
function addElement() {
    intTextBox++;
	intTextBox2++;
    var objNewDiv = document.createElement('div');
    objNewDiv.setAttribute('id', 'div_' + intTextBox);
    objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" class="tb" name="tb_' + intTextBox + '"/>';
    document.getElementById('content').appendChild(objNewDiv);
	
	
	var objNewDiv = document.createElement('div');
    objNewDiv.setAttribute('id', 'div_' + intTextBox);
    objNewDiv.innerHTML = 'Textbox1 ' + intTextBox + ': <input type="text" id="tb2_' + intTextBox + '" class="tb2" name="tb2_' + intTextBox + '"/>';
    document.getElementById('content').appendChild(objNewDiv);
}

<p>Demo of adding and removing textboxes dynamically using simple JavaScript</p>
<p>
    <a href="javascript:void(0);" onclick="addElement();">Add</a>
    <a href="javascript:void(0);" onclick="removeElement();">Remove</a>
</p>
<div id="content"></div><div id="content2"></div>


<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>

Answer 1

主要问题是：

e += array[y].value ''+'' e2 += array2[y].value;

这不是有效的赋值语句，也是语法错误的来源。

但是，在我们进入它应该是什么之前，你的代码需要清理一下。您的代码遵循不再使用的古老实践。例如，不要使用带有href=javascript:void()的超链接，因为您需要某些内容供用户单击。超链接用于导航，如果您不进行导航，只需使用按钮或任何其他元素，因为几乎所有内容都支持click事件。

要改变的另一个重要方面是设置事件处理程序的方式。您正在使用20年以上的技术。不要将内联HTML事件属性（onclick，onchange等）用作 there are many reasons ，因为它们可能会导致代码出现问题。相反，请使用 .addEventListener() 注册您的事件处理程序。

接下来，不是通过将变量连接成字符串来创建新元素，而是使用 DOM API 将新元素创建为节点对象，这使得配置它们变得更加简单并且无需连接

虽然你肯定可以使用计数for循环遍历元素集合，但更现代且易于使用的 .forEach() 方法可用于节点集合（在大多数但不是所有浏览器中）和数组（在所有现代浏览器中）。 .forEach()的优点在于它将枚举所有Array元素，而无需设置和管理循环计数器。这使得代码更加简单，并避免了循环计数器的许多常见错误。

<input>元素未获得结束标记（</input>） and avoid using "self-terminated" tags （即<hr/>而不是<hr>）。这是一种过时的语法，无法获得任何东西。

请注意以下代码中HTML和JavaScript的清晰程度。

// Get all the DOM references your functions will need, just once, after the DOM is loaded
var add = document.getElementById("add");
var remove = document.getElementById("remove");
var result = document.getElementById("Result");
var btn = document.getElementById("btnDisplay");
var content = document.getElementById('content');
var textboxes = document.getElementsByClassName("tb");

// Set up event handlers:
add.addEventListener("click", addElement);
remove.addEventListener("click", removeElement);
btn.addEventListener("click", display_array);

function display_array() {
   var resultString = "";  // Final built up string will be stored here
   
   // Get all the textboxes into an array so .forEach() can safely be used
   Array.prototype.slice.call(textboxes).forEach(function(tb){
     resultString += "<hr>" + tb.value; // Just get value of textbox next to <hr>
   });
   result.innerHTML = resultString;  // Update the element with the results
}

var textBoxNum = 0;  //  Counter to track number of textboxes for id assignment

function addElement() {
  // Create and configure <div>
  var objNewDiv = document.createElement('div');
  objNewDiv.id = 'div_' + ++textBoxNum;
  objNewDiv.classList.add("row");
  
  // Create and configure <label>
  var lbl1 = document.createElement("label")
  lbl1.textContent = "Textbox " + textBoxNum;
  lbl1.for = "tb" + textBoxNum;

  // Create and configure <input type=text>
  var tb1 = document.createElement("input");
  tb1.type = "text";
  tb1.id = "tb" + textBoxNum;
  tb1.classList.add("tb");
  tb1.name = tb1.id;

  // Put labels and textboxes into the div
  objNewDiv.appendChild(lbl1);
  objNewDiv.appendChild(tb1); 
    
  // Put the div into the document
  content.appendChild(objNewDiv);
}

function removeElement(){

}

/* None of this is necessary, but it makes the spans look like buttons
   and add spacing to the end results. */
span.button {
  display:inline-block;
  border:1px solid gray;
  padding:4px;
  width:5em;
  background-color:#e0e0e0;
  text-align:center;
  cursor:pointer;
  user-select:none;
}

label {
  display:inline-block;
  padding-right:1em;
}

div.row {
  margin-bottom:.5em;
}

<p>Demo of adding and removing textboxes dynamically using simple JavaScript</p>
<p>
    <span id="add" class="button">Add</span>
    <span id="remove" class="button">Remove</span>
</p>
<div id="content"></div>
<div id="content2"></div>

<input type="button" id="btnDisplay" value="Display">
<div id="Result"></div>

Answer 2

我已在此行更正了您的代码＆＃34; e + = array [y] .value＆＃39;＆＃39; +＆＃39;＆＃39; e2 + = array2 [y] .value;＆＃34;这应该适用于添加和显示功能

＆＃13;

function display_array()
{
   var array=document.getElementsByClassName('tb');
   var e = "<hr/>";
var array2=document.getElementsByClassName('tb2');
  var e2 = "<hr/>";   
    
   for (var y=0; y<array.length; y++)
   {
     e += array[y].value + e2 + array2[y].value;
	// e2 += "Mac " + y + " = " + array2[y].value;
   }
document.getElementById("Result").innerHTML = e + 'm' + e2;
//document.getElementById("Result2").innerHTML = e;
}
//Counter to maintain number of textboxes and give them unique id for later reference
var intTextBox = 0;
var intTextBox2 = 0;
/**
* Function to add textbox element dynamically
* First we incrementing the counter and creating new div element with unique id
* Then adding new textbox element to this div and finally appending this div to main content.
*/
function addElement() {
    intTextBox++;
	intTextBox2++;
    var objNewDiv = document.createElement('div');
    objNewDiv.setAttribute('id', 'div_' + intTextBox);
    objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" class="tb" name="tb_' + intTextBox + '"/>';
    document.getElementById('content').appendChild(objNewDiv);
	
	
	var objNewDiv = document.createElement('div');
    objNewDiv.setAttribute('id', 'div_' + intTextBox);
    objNewDiv.innerHTML = 'Textbox1 ' + intTextBox + ': <input type="text" id="tb2_' + intTextBox + '" class="tb2" name="tb2_' + intTextBox + '"/>';
    document.getElementById('content').appendChild(objNewDiv);
}

＆＃13;

<p>Demo of adding and removing textboxes dynamically using simple JavaScript</p>
<p>
    <a href="javascript:void(0);" onclick="addElement();">Add</a>
    <a href="javascript:void(0);" onclick="removeElement();">Remove</a>
</p>
<div id="content"></div><div id="content2"></div>


<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>

＆＃13;

多个动态输出

2 个答案: