按钮 onclicks 对某些元素不起作用

Question

我正在用 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 （

document.body.appendChild(testme)

，按钮可以正常工作。输出是由

const outputElement = document.getElementById('output');

给出的普通 div 我还有其他使用

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 程序员。 编辑： 我注意到如果我把测试放在 selectName() 之前，就像这样：

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.');
      }
    }
  });

它可以工作，但前提是我在输入名称之前

单击测试按钮。输入名字后，测试按钮不起作用。

我的

Answer 1

函数正在修改outputElement的innerHTML，这会破坏监听器。使用

outputElement.insertAdjacentHTML()

 解决了我的问题。