JavaScript新手求助：点击按钮为表单添加标签与输入框异常

嘿，我来帮你排查下问题哈～你遇到的[object MouseEvent]问题，主要是两个小坑导致的，咱们一步步来解决：

问题1：回调函数参数覆盖了变量 #

你写的事件回调函数是function(newInput){...}，这里的newInput其实是浏览器自动传入的鼠标事件对象（MouseEvent），直接把你之前定义的HTML字符串变量给覆盖了！所以当你执行document.querySelector("#form").innerHTML = newInput时，本质是把事件对象转成了字符串，结果就变成了[object MouseEvent]。

问题2：直接替换了原有表单内容 #

就算参数名改对了，用innerHTML = newInput也会把表单里原有的所有元素（比如Runda、Datum这些）全部清空替换掉，这肯定不是你想要的——你需要的是追加新元素，而不是替换。

修正后的代码方案 #

方案1：用innerHTML追加（简单易上手） #

这个方案适合新手快速实现，注意要避免重复的id（HTML里id必须唯一）：

// 初始化洞的计数，用来生成唯一id
let holeCount = 1;

// 给按钮绑定点击事件，回调函数不要用和变量重名的参数
document.querySelector("#addNewHole").addEventListener("click", function() {
  // 动态生成带唯一id的HTML片段
  const newInput = `<label>Hål ${holeCount}:</label><br><input type="text" id="hole${holeCount}">`;
  // 用 += 追加内容，而不是直接替换
  document.querySelector("#form").innerHTML += newInput;
  // 计数加1，下次生成新的id
  holeCount++;
});

方案2：用DOM API创建元素（更安全推荐） #

如果后续需要对新元素做更多操作，用DOM创建元素的方式更灵活，也能避免HTML拼接可能带来的风险：

let holeCount = 1;
// 提前获取表单元素，避免每次点击都重新查询
const form = document.querySelector("#form");

document.querySelector("#addNewHole").addEventListener("click", function() {
  // 创建label并设置文本
  const label = document.createElement("label");
  label.textContent = `Hål ${holeCount}:`;

  // 创建input并设置属性
  const input = document.createElement("input");
  input.type = "text";
  input.id = `hole${holeCount}`;

  // 创建换行元素
  const br = document.createElement("br");

  // 把元素依次添加到表单中
  form.appendChild(label);
  form.appendChild(br);
  form.appendChild(input);

  holeCount++;
});

另外补充个小细节：HTML里的<input>是自闭合标签，不需要写</input>哦～

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