Spot the bug - #136: Monster Incubator Lab

programming web dev
1

Why does my monster cloner refuse to copy child elements?

const incubator = document.querySelector("#incubator");
const lab = document.querySelector("#lab");
const cloneBtn = document.querySelector("#clone-btn");

function createMonsterCard(species, eyeballs, accessories) {
  const card = document.createElement("article");
  card.className = "monster-card";

  const title = document.createElement("h3");
  title.textContent = species;
  card.appendChild(title);

  const eyesWrap = document.createElement("div");
  eyesWrap.className = "eye-socket";
  for (let i = 0; i < eyeballs; i++) {
    const eye = document.createElement("span");
    eye.textContent = "👁️";
    eyesWrap.appendChild(eye);
  }
  card.appendChild(eyesWrap);

  const badge = document.createElement("span");
  badge.className = "badge";
  badge.textContent = `Gear: ${accessories.join(", ")}`;
  card.appendChild(badge);

  return card;
}

const prototypeMonster = createMonsterCard("Giggle Fiend", 3, ["Tiny Hat", "Spatula"]);
incubator.appendChild(prototypeMonster);

cloneBtn.addEventListener("click", () => {
  const source = incubator.firstElementChild;
  if (!source) return;

  const specimenClone = source.cloneNode(false);
  lab.appendChild(specimenClone);
});

Reply with what is broken and how you would fix it.