-1

Error is: Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

Below is my whole js file:

const DOMSelectors = {
  button: document.getElementById("btn"),
  form: document.getElementById("form"),
  removeButton: document.getElementById("remove-btn"),
  display: document.getElementById("display-card"),
  formInput: document.querySelectorAll("#form-input"),
  resetButton: document.getElementById("resetbutton"),
  typeInput: document.getElementById("type-input"),
  flavorInput: document.getElementById("flavor-input"),
  brandInput: document.getElementById("brand-input"),
};

DOMSelectors.button.addEventListener("submit", function () {
  let imputs = Array.box;
  typeInput = imputs[1].value;
  flavorInput = imputs[2].value;
  brandInput = imputs[3].value;
  console.log(imputs);
});

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

function display() {
  h1 = DOMSelectors.typeInput.value;
  h2 = DOMSelectors.flavorInput.value;
  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 id = "removebtn">Remove</button>
    </div>
       `
  );
}

function destroy() {
  const btn = Array.from(document.getElementById("removebtn"));
  btn.forEach((button) => {
    button.addEventListener("click", function () {
      this.parentElement.remove;
    });
  });
}

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

I am getting the error on the line:

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

I haven't been able to figure out what is causing this error

I am new to JavaScript so any help would be appreciated

Alvin Feng
  • 1
  • 3

1 Answers1

1

It's saying that document.getElementById("removebtn") is returning null. Perhaps you don't have an element in your DOM with the id of "removebtn" ? Or maybe you are running this code before it exists?

Also, Array.from expects an iterable list of things, but getElementById only returns a single DOM element, so it doesn't make sense to use Array.from in this case.

Jacob Caron
  • 11
  • 2