JavaScript动态添加输入字段功能实现技术问询

我来帮你修正这段代码，解决重复ID、this指向、按钮禁用以及数据存储的问题，同时还原你想要的交互效果：

1. HTML 结构 #

先调整HTML为原生JS友好的写法（如果是Angular框架可以看后面的可选版本）：

<div>
  CLICK ON BUTTON TO ADD NEW FIELD
  <div class="showInputField">
    <button onclick="addRow()">ADD</button>
  </div>
</div>

2. CSS 样式（匹配参考布局） #

添加基础样式让布局更贴近需求：

.row {
  margin: 8px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.row input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.row button {
  padding: 4px 12px;
  cursor: pointer;
}
.row button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

3. JavaScript 核心逻辑 #

修复所有问题并实现需求功能：

// 存储所有输入行的数据
const users = [];

function addRow() {
  const rowContainer = document.createElement('div');
  rowContainer.className = 'row';

  // 创建两个输入框，避免重复ID问题
  const input1 = document.createElement('input');
  input1.type = 'text';
  input1.placeholder = '输入内容1';

  const input2 = document.createElement('input');
  input2.type = 'text';
  input2.placeholder = '输入内容2';

  // 创建ADD按钮
  const addBtn = document.createElement('button');
  addBtn.textContent = 'ADD';

  // 绑定点击事件，处理当前行逻辑
  addBtn.addEventListener('click', function() {
    // 禁用当前点击的按钮
    this.disabled = true;
    
    // 获取当前行的输入值
    const val1 = input1.value.trim();
    const val2 = input2.value.trim();
    
    // 验证输入完整性
    if (val1 && val2) {
      // 将当前行的两个值存入数组
      users.push([val1, val2]);
      console.log('已存储的数据:', users);
    } else {
      alert('请填写两个输入框的内容');
      // 未填则恢复按钮可用状态
      this.disabled = false;
      return;
    }

    // 添加新的一行输入字段
    addRow();
  });

  // 将元素组装到行容器中
  rowContainer.appendChild(input1);
  rowContainer.appendChild(input2);
  rowContainer.appendChild(addBtn);

  // 将行容器添加到页面
  document.querySelector('.showInputField').appendChild(rowContainer);
}

关键问题修正说明 #

• 移除重复ID：不再使用固定ID，直接通过创建的DOM节点获取输入值，避免后续行的元素无法正确定位
• 解决this指向问题：使用匿名函数绑定按钮事件，直接用this访问当前按钮实现禁用，同时直接访问当前行的输入框节点
• 实现按钮禁用：点击ADD后立即禁用当前按钮，防止重复提交
• 优化数据存储：每次将当前行的两个输入值作为一个数组存入users，结构更清晰，避免原代码中数组操作的混乱
• 添加输入验证：确保两个输入框都有内容才存入数组，提升用户体验

可选：Angular框架版本（适配原HTML的(click)语法） #

如果你的代码是基于Angular，可调整为组件类写法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-add',
  template: `
    <div>
      CLICK ON BUTTON TO ADD NEW FIELD
      <div class="showInputField">
        <button (click)="addRow()">ADD</button>
      </div>
    </div>
  `,
  styles: [`
    .row { margin: 8px 0; display: flex; gap: 8px; align-items: center; }
    .row input { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; }
    .row button { padding: 4px 12px; cursor: pointer; }
    .row button:disabled { cursor: not-allowed; opacity: 0.6; }
  `]
})
export class InputAddComponent {
  users: string[][] = [];

  addRow() {
    const showContainer = document.querySelector('.showInputField') as HTMLElement;
    const rowContainer = document.createElement('div');
    rowContainer.className = 'row';

    const input1 = document.createElement('input');
    input1.type = 'text';
    input1.placeholder = '输入内容1';

    const input2 = document.createElement('input');
    input2.type = 'text';
    input2.placeholder = '输入内容2';

    const addBtn = document.createElement('button');
    addBtn.textContent = 'ADD';

    addBtn.addEventListener('click', () => {
      addBtn.disabled = true;
      const val1 = input1.value.trim();
      const val2 = input2.value.trim();
      if (val1 && val2) {
        this.users.push([val1, val2]);
        console.log('已存储的数据:', this.users);
      } else {
        alert('请填写两个输入框的内容');
        addBtn.disabled = false;
        return;
      }
      this.addRow();
    });

    rowContainer.appendChild(input1);
    rowContainer.appendChild(input2);
    rowContainer.appendChild(addBtn);
    showContainer.appendChild(rowContainer);
  }
}

内容的提问来源于stack exchange，提问作者Wet_Pantz