如何添加plus按钮动态新增输入框 适配两种字符串组合生成功能

核心优化思路 #

原有代码为固定6个输入框做了硬编码绑定，因此无法适配动态新增的输入框，仅需要将逻辑改造为动态读取所有输入框、用循环生成组合结果即可，具体改造点如下：

1. 给原有输入框统一添加类名com-input，后续新增的输入框也携带该类，不需要依赖固定ID即可批量读取所有输入框的值
2. 实现plus按钮的点击逻辑，每次点击自动插入一个新的输入框
3. 重写两个组合函数为通用遍历逻辑，无需硬编码每个拼接规则，输入框数量变化后也能正常计算结果

完整可运行代码 #

HTML代码 #

<!-- 输入框容器，方便插入新增输入框 -->
<div id="inputContainer">
  <div><input class="com-input" id="input1" /></div>
  <div><input class="com-input" id="input2" /></div>
  <div><input class="com-input" id="input3" /></div>
  <div><input class="com-input" id="input4" /></div>
  <div><input class="com-input" id="input5" /></div>
  <div><input class="com-input" id="input6" /></div>
</div>

<br>
<button onclick="addInput()">plus</button>
<button onclick="combinationOne()">combination One</button>
<button onclick="combinationTwo()">combination Two</button>
<p id="outcome"></p>

JS代码 #

// 输入框计数器，初始值为已有的6个
let inputCount = 6;
// 新增输入框逻辑
function addInput() {
  inputCount++;
  const container = document.getElementById('inputContainer');
  const newInputWrap = document.createElement('div');
  newInputWrap.innerHTML = `<input class="com-input" id="input${inputCount}" />`;
  container.appendChild(newInputWrap);
}

// 通用方法：获取当前所有输入框的输入值
function getAllInputValues() {
  const inputList = document.querySelectorAll('.com-input');
  return Array.from(inputList).map(item => item.value.trim());
}

function combinationOne() {
  const values = getAllInputValues();
  const len = values.length;
  let result = '';
  // 双重循环生成所有有序两两组合
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len; j++) {
      // 跳过自身和自身的拼接，如果允许自身拼接可删除这行判断
      if (i === j) continue;
      result += `1. ${values[i]}/2. ${values[j]}<br>`;
    }
  }
  document.getElementById('outcome').innerHTML = result;
}

function combinationTwo() {
  const values = getAllInputValues();
  const len = values.length;
  // 用Set存储已生成的组合，实现去重
  const existedCom = new Set();
  let result = '';
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      const strA = `${values[i]}/${values[j]}`;
      const strB = `${values[j]}/${values[i]}`;
      if (!existedCom.has(strA)) {
        result += strA + '<br>';
        existedCom.add(strA);
      }
      if (!existedCom.has(strB)) {
        result += strB + '<br>';
        existedCom.add(strB);
      }
    }
  }
  document.getElementById('outcome').innerHTML = result;
}

逻辑说明 #

• 新增输入框后无需调整其他逻辑，两个组合函数会自动读取当前所有输入框的内容计算结果
• combination One 生成所有有序两两组合，顺序不同视为不同结果，符合需求规则
• combination Two 通过Set实现组合字符串去重，且默认排除了自身拼接的场景，符合需求规则

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