如何将按钮与input输入框关联，点击时获取输入值存入数组？

你可以通过以下3种常用方案实现需求，按需选择即可：

• 方案1：绑定表单submit事件（最推荐，天然支持回车提交，无需手动关联元素）
  HTML 代码调整如下：

<form id="tagForm">
  <label>
    Tags: <input type="text" name="todoTags" required>
    <button type="submit">Create new tag</button>
  </label>
</form>

JS 代码：

const userTags = [];
const tagForm = document.querySelector('#tagForm');

tagForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  // 直接通过表单name属性获取输入值
  const inputVal = e.target.todoTags.value.trim();
  // 判空避免添加无效内容
  if (inputVal) {
    userTags.push(inputVal);
    // 提交后清空输入框优化体验
    e.target.todoTags.value = '';
  }
})

• 方案2：给输入框加唯一ID，点击按钮时直接取值
  HTML 代码调整如下：

<label>
  Tags: <input type="text" name="todoTags" id="todoTagsInput">
  <button onclick="addTags()">Create new tag</button>
</label>

JS 代码：

const userTags = [];
function addTags() {
  const input = document.querySelector('#todoTagsInput');
  const inputVal = input.value.trim();
  if (inputVal) {
    userTags.push(inputVal);
    input.value = '';
  }
}

• 方案3：无需加ID，通过事件源父元素查找输入框（适合元素动态生成的场景）
  HTML 代码调整如下：

<label>
  Tags: <input type="text" name="todoTags">
  <button onclick="addTags(event)">Create new tag</button>
</label>

JS 代码：

const userTags = [];
function addTags(event) {
  // 从按钮的父级label元素中查找对应输入框
  const input = event.target.parentElement.querySelector('input[name="todoTags"]');
  const inputVal = input.value.trim();
  if (inputVal) {
    userTags.push(inputVal);
    input.value = '';
  }
}

所有方案默认加了输入值去空格、判空的逻辑，不需要可以自行删除。

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