[英]Repeating a div based on user input (JavaScript solution preferred)
寻找以下问题的最简单实现:
我有一个用户输入数字字段,例如:
<input type="number" id="numInput" name="numInput" value="1" onchange="myFunc()">
<div id="demo">*** TEST ***</div>
我想根据用户输入的#numInput 值复制#demo div,例如,如果用户输入'5',页面上将显示五个#demo div。 目前,我正在使用以下 function:
function myFunc() {
var newArray = [];
var numInput = document.getElementById('numInput').value;
var x = document.getElementById('demo').innerHTML;
for(var i=0; i<numInput; i++) {
newArray.push(x);
}
document.getElementById('demo').innerHTML = newArray;
}
但这会添加到现有数组中,而不是根据用户输入输出确切数量的 div。 请指教。 谢谢。
不应有多个相同的 id 值。
function myFunc() { let numInput = document.getElementById("numInput"); while (numInput.nextSibling) { numInput.nextSibling.remove(); } let numInputval = document.getElementById('numInput').value; for(var i=numInputval; i>0; i--) { var newDiv = document.createElement('div'); newDiv.setAttribute('id', 'demo' + i); newDiv.innerHTML = '*** TEST ***'; numInput.parentNode.insertBefore(newDiv, numInput.nextSibling); } }
<input type="number" id="numInput" name="numInput" onchange="myFunc()">
+Edit您还可以使用 javascript 操作<form>
。
function myFunc() { let numInput = document.getElementById("numInput"); while (numInput.nextSibling) { numInput.nextSibling.remove(); } let numInputval = document.getElementById('numInput').value; for(var i=numInputval; i>0; i--) { var newInput = document.createElement('input'); newInput.setAttribute('id', 'demoInput' + i); newInput.setAttribute('type', 'text'); newInput.setAttribute('name', 'demoInputName' + i); newInput.setAttribute('onchange', 'myFormChangeListener(this)'); numInput.parentNode.insertBefore(newInput, numInput.nextSibling); numInput.parentNode.insertBefore(document.createElement('br'), numInput.nextSibling); } } function myFormChangeListener(element) { console.log(element); console.log(element.value); myForm.action = 'http://the.url/'; myForm.method = 'post'; console.log(myForm); //myForm.submit; }
<form id="myForm"> <input type="number" id="numInput" name="numInput" onchange="myFunc()"> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.