<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addMoreInput</title>
</head>
<body>
<div id="inputCollection">
<input placeholder="输入内容" style="display: inline-block" class="inputClass" id="1">
<button onclick="addInput()" id="addBtn">+</button>
<button onclick="minusInput()" id="minusBtn">-</button>
</div>
<button style="display: block;margin-top:20px" onclick="submit()">提交</button>
<script>
if(document.querySelectorAll('input').length === 1){
document.getElementById("minusBtn").disabled = true;
}
//添加输入框
function addInput(){
var id = document.querySelectorAll('input').length + 1;
document.getElementById("minusBtn").disabled = false;
var a = document.getElementById("inputCollection");
var addInput = document.createElement('input');
addInput.style.display = "block";
addInput.className = "inputClass";
addInput.id = (id);
a.append(addInput);
}
//移除输入框
function minusInput(){
var minusInputBefore = document.querySelectorAll('input').length;
if(minusInputBefore !== 1){
var b = document.getElementById("inputCollection");
var removeId = minusInputBefore.toString();
b.removeChild(document.getElementById(removeId));
}
var minusInputAfter = document.querySelectorAll('input').length;
console.log("minus inputLength:" + minusInputAfter);
if(minusInputAfter === 1){
document.getElementById("minusBtn").disabled = true;
}
}
//获取各个输入框的值，组成数组
function submit() {
var inputNum = document.querySelectorAll('input').length;
var valueArr = [];
for(var i=0;i<inputNum;i++){
id = i+1;
valueArr.push(document.getElementById(id).value);
}
console.log(valueArr);
}
</script>
<style>
.inputClass{
margin-top:10px;
}
</style>
</body>
</html>
版权声明：本文为qq_40947321原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。