按钮点击对某些元素不起作用

问：

我正在用 JavaScript 制作一个游戏。我正在尝试创建一个带有元素的按钮并将其附加到场景中。我已经在几个地方这样做了，但现在代码失败了。这是不起作用的（简化）代码：onclick

const testme = document.createElement('input');
  testme.type = 'button';
  testme.value = 'click me';
  testme.addEventListener('click', () => {
    alert('clicked');
  });
  outputElement.appendChild(testme);

该按钮将呈现，但单击它不会触发效果。如果我不使用匿名函数，即它按预期运行（仅运行一次代码）。testme.addEventListener('click', alert('clicked'));

如果我将元素附加到 document.body（按钮工作正常。输出是给出的普通 div 我有其他函数使用这些函数，这些函数工作正常：document.body.appendChild(testme)const outputElement = document.getElementById('output');outputElement.appendChild

function chooseName() {
  const nameInput = document.createElement('input');
  nameInput.type = 'text';
  nameInput.id = 'name-input';
  nameInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const playerName = nameInput.value.trim();
      if (playerName !== '') {
        setPlayerName(playerName);
        output(`Your name is ${getPlayerName()}`);
        gameState = 'chooseOccupation';
        document.getElementById('name-input').remove();
        promptOccupation();
      } else {
        output('Please enter a valid name.');
      }
    }
  });

  outputElement.appendChild(nameInput);
  nameInput.focus();
}

  const occupations = [
    'Archaeologist', 'Astrologer', 'Brewer', 'Burglar', 'Clergyman', 'Courier',
    'Dramatist', 'Ditch digger', 'Forester', 'Gambler', 'Hangman', 'Healer',
    'Jeweler', 'Netmaker', 'Ostler', 'Scribe', 'Taxidermist', 'Trapper',
    'Undertaker', 'Weaver'
  ];

  const occupationList = document.createElement('div');
  for (occupation of occupations) {
    const occupationButton = document.createElement('p');
    const job = occupation;
    occupationButton.textContent = occupation;
    occupationButton.classList.add('clickable-text');
    occupationButton.addEventListener('click', () => chooseOccupation(job));
    occupationList.appendChild(occupationButton);
  }
  outputElement.appendChild(occupationList);

不幸的是，由于这个项目太大了（5+ 个文件，数百个 LoC），我不确定如何制作一个可重现的例子。我希望有人能告诉我可能是什么原因造成的，因为坦率地说，我没有想法，而且不是一个优秀的 JavaScript 程序员。

编辑： 我注意到如果我将测试放在chooseName（）之前，如下所示：

function chooseName() {
  const testme = document.createElement('input');
  testme.type = 'button';
  testme.value = 'click me';
  testme.addEventListener('click', () => {
    alert('clicked');
  });

  const nameInput = document.createElement('input');
  nameInput.type = 'text';
  nameInput.id = 'name-input';
  outputElement.appendChild(testme);
  nameInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const playerName = nameInput.value.trim();
      if (playerName !== '') {
        setPlayerName(playerName);
        output(`Your name is ${getPlayerName()}`);
        gameState = 'chooseOccupation';
        document.getElementById('name-input').remove();
        promptOccupation();
      } else {
        output('Please enter a valid name.');
      }
    }
  });

它有效，但前提是我在输入名称之前单击测试按钮。输入名称后，测试按钮不起作用。