Spot the bug - #142: Soundboard Pad Manager

programming web dev
1

Why does my interactive soundboard button list keep shrinking?

const soundboard = document.querySelector("#soundboard");
const statusLog = document.querySelector("#status-log");

const samplePads = [
  { name: "Laser", fx: "pew-pew" },
  { name: "Siren", fx: "wee-woo" },
  { name: "Boing", fx: "boiiing" },
  { name: "Quack", fx: "quack-quack" }
];

samplePads.forEach((pad) => {
  const button = document.createElement("button");
  button.className = "pad-btn";
  button.textContent = pad.name;
  button.dataset.fx = pad.fx;
  soundboard.appendChild(button);
});

function playEffect(effectName) {
  statusLog.textContent = `Playing: ${effectName}`;
}

function armSoundboard() {
  const buttons = soundboard.getElementsByClassName("pad-btn");

  for (let i = 0; i < buttons.length; i++) {
    const currentBtn = buttons[i];
    currentBtn.classList.remove("pad-btn");
    currentBtn.classList.add("pad-armed");
    currentBtn.addEventListener("click", () => {
      playEffect(currentBtn.dataset.fx);
    });
  }
}

armSoundboard();

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