// 用于保存输入框编号和相应值的数组 const inputData = []; // 用于保存当前的编号 let inputCounter = 0; // 获取按钮和输入框容器 const addInputBtn = document.getElementById('addInputBtn'); const inputContainer = document.getElementById('inputContainer'); const dataDisplay = document.getElementById('dataDisplay'); // 给按钮添加点击事件 addInputBtn.addEventListener('click', function() { // 增加编号 inputCounter++; // 创建一个新的 div 作为输入框容器 const newDiv = document.createElement('div'); newDiv.classList.add('input-container'); // 创建一个新的 label 标签，显示编号 const newLabel = document.createElement('label'); newLabel.textContent = '输入框 ' + inputCounter + ': '; // 设置 label 的 for 属性，使其与输入框关联 newLabel.htmlFor = 'input' + inputCounter; // 创建一个新的输入框 const newInput = document.createElement('input'); newInput.type = 'text'; newInput.name = 'input' + inputCounter; // 设置唯一 name 属性 newInput.id = 'input' + inputCounter; // 设置唯一 id 属性 // 将 label 和 input 添加到 div 中 newDiv.appendChild(newLabel); newDiv.appendChild(newInput); // 将新的 div 添加到 inputContainer 中 inputContainer.appendChild(newDiv); // 将该输入框的编号和空值存入数组 inputData.push({ id: inputCounter, value: '' }); // 监听每个输入框的变化，实时更新数组中的值 newInput.addEventListener('input', function(event) { const index = inputData.findIndex(item => item.id === inputCounter); inputData[index].value = event.target.value; displayData(); // 每次输入变化时更新显示 }); displayData(); // 初次创建时更新显示 }); // 显示当前的数组数据 function displayData() { dataDisplay.textContent = JSON.stringify(inputData, null, 2); }