Question

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

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

＆＃13;

function display_array()
{
   var e = "<hr/>";   
    
   for (var y=0; y<array.length; y++)
   {
     e += "Element " + y + " = " + array[y] + "<br/>";
   }
   document.getElementById("Result").innerHTML = e;
}
//Counter to maintain number of textboxes and give them unique id for later reference
var intTextBox = 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++;
    var objNewDiv = document.createElement('div');
    objNewDiv.setAttribute('id', 'div_' + intTextBox);
    objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_' + intTextBox + '"/>';
    document.getElementById('content').appendChild(objNewDiv);
}

/**
* Function to remove textbox element dynamically
* check if counter is more than zero then remove the div element with the counter id and reduce the counter
* if counter is zero then show alert as no existing textboxes are there
*/
function removeElement() {
    if(0 < intTextBox) {
        document.getElementById('content').removeChild(document.getElementById('div_' + intTextBox));
        intTextBox--;
    } else {
        alert("No textbox to remove");
    }
}

＆＃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>


<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>

＆＃13;

Answer 1

我给你3个更改，不确定这是不是你想要的，看看这个演示： https://jsfiddle.net/xianshenglu/ev1f38L3/

首先改变：添加var array ,,,,

var array=document.getElementsByClassName('tb');

第二，添加.value

 e += "Element " + y + " = " + array[y].value + "<br/>";

第三，添加class =＆＃34; tb＆＃34;

objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" 
id="tb_' + intTextBox + '" class="tb" name="tb_' + intTextBox + '"/>';

Answer 2

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

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>

使用HTML输出

2 个答案: