求助：Uncaught TypeError: object null is not iterable错误排查

核心错误分析 #

你遇到的Uncaught TypeError: object null is not iterable错误，根源在这行代码：

const btn = Array.from(document.getElementById("removebtn"));

• document.getElementById()只能返回单个DOM元素或null，它不是可迭代对象，无法用Array.from()转换为数组。
• 你在每个动态生成的卡片里都用了相同的id="removebtn"，这违反了HTML规范（id必须唯一），浏览器只会识别第一个匹配的元素，后续的按钮无法被正确获取。

分步修复代码 #

1. 替换重复id为class #

修改display函数里的按钮标记，把id="removebtn"改成class="remove-btn"：

function display() {
  const h1 = DOMSelectors.typeInput.value;
  const h2 = DOMSelectors.flavorInput.value;
  const h3 = DOMSelectors.brandInput.value;
  DOMSelectors.display.insertAdjacentHTML(
    "afterbegin",
    `<div class="display-card"> 
      <h1>${h1}</h1> 
      <br> 
      <h2>${h2}</h2> 
      <br> 
      <h3>${h3}</h3> 
      <br> 
      <button class="remove-btn">Remove</button> 
    </div>`
  );
}

2. 修正destroy函数的逻辑 #

• 改用document.querySelectorAll()获取所有类为remove-btn的按钮（它返回可迭代的NodeList，可以直接用forEach）。
• 修复remove方法调用：this.parentElement.remove()（原代码少了括号，没有执行方法）。

修改后的destroy函数：

function destroy() {
  const btns = document.querySelectorAll(".remove-btn");
  btns.forEach((button) => {
    button.addEventListener("click", function () {
      this.parentElement.remove();
    });
  });
}

3. 调整表单提交事件的执行顺序 #

把destroy()移到display()之后（原代码先调用destroy时新按钮还未创建，绑定无效）：

DOMSelectors.form.addEventListener("submit", function (event) {
  event.preventDefault();
  display();
  destroy();
  resetbutton();
});

4. 修复其他潜在问题 #

• 变量声明缺失：display函数里的h1、h2、h3加上const声明，避免变成全局变量。
• 删除无效代码：原代码中DOMSelectors.button.addEventListener("submit", ...)和let imputs = Array.box;属于无效逻辑，直接删除即可。

完整修复后的代码 #

const DOMSelectors = {
  form: document.getElementById("form"),
  display: document.getElementById("display-card"),
  resetButton: document.getElementById("resetbutton"),
  typeInput: document.getElementById("type-input"),
  flavorInput: document.getElementById("flavor-input"),
  brandInput: document.getElementById("brand-input"),
};

function resetbutton() {
  DOMSelectors.brandInput.value = ``;
  DOMSelectors.flavorInput.value = ``;
  DOMSelectors.typeInput.value = ``;
}

function display() {
  const h1 = DOMSelectors.typeInput.value;
  const h2 = DOMSelectors.flavorInput.value;
  const h3 = DOMSelectors.brandInput.value;
  DOMSelectors.display.insertAdjacentHTML(
    "afterbegin",
    `<div class="display-card"> 
      <h1>${h1}</h1> 
      <br> 
      <h2>${h2}</h2> 
      <br> 
      <h3>${h3}</h3> 
      <br> 
      <button class="remove-btn">Remove</button> 
    </div>`
  );
}

function destroy() {
  const btns = document.querySelectorAll(".remove-btn");
  btns.forEach((button) => {
    button.addEventListener("click", function () {
      this.parentElement.remove();
    });
  });
}

DOMSelectors.form.addEventListener("submit", function (event) {
  event.preventDefault();
  display();
  destroy();
  resetbutton();
});

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