如何在 Javascript 中触发其他事件之后创建的元素上的事件？

Question

我复制了Windows计算器。我被“内存选项卡”困住了。

我需要在三个按钮上创建点击事件：MC M+ M- 如下（屏幕右上角）：

问题是，每次我在主计算器上单击“MS”（屏幕左侧，主按钮上方）时，都会创建这些按钮（以及周围的所有元素）。

function addMemoryValue(){
  const uls = document.createElement("ul");
  const lis = document.createElement("li");
  const h2s = document.createElement("h2");
  h2s.textContent = Number(display.textContent);
  const h3s = document.createElement("h3");

  uls.appendChild(lis);
  lis.appendChild(h2s);
  h2s.appendChild(h3s);

  let valueBtn = ["MC", "M+", "M-"];

  valueBtn.forEach((element) => {
  const memoryBtn = document.createElement("button");
  memoryBtn.setAttribute("value", element);
  memoryBtn.textContent = element;
  const memorySpn = document.createElement("span");
  memorySpn.appendChild(memoryBtn);
  memoryBtn.classList.add("btnsave");
  h3s.appendChild(memorySpn);

  const buttonTest = document.getElementsByClassName("btnsave");
  console.log(buttonTest.textContent);
  })

我想迭代这些按钮并根据文本内容创建 if 语句，但我不确定如何定位这些按钮，因为它们还不存在。

例如，如果我尝试以下操作：

const buttonTest = document.getElementsByClassName("btnsave");
console.log(buttonTest.textContent);

无论

console.log

是在函数内部还是外部，我都会得到“未定义”。

Answer 1

您可以直接在创建按钮的位置添加单击事件处理程序，如下所示：

var clickHandler = function() {
    console.log("button clicked");
};

var button = document.createElement("button");
button.textContent = "test";
button.addEventListener("click", clickHandler);

document.getElementById("container").appendChild(button);

<div id="container">

</div>

OP评论后更新：

此代码片段将在单击按钮时创建三个按钮并向其添加三个不同的事件处理程序。

var createButton = function(title, clickHandler) {
    var button = document.createElement("button");
    button.textContent = title;
    button.addEventListener("click", clickHandler);

    return button;
};

var removeButtons = function() {
    var container = document.getElementById('container');
    
    while (container.firstChild) {
      container.removeChild(container.lastChild);
    }
};

var createButtons = function() {
    removeButtons();
    
    var container = document.getElementById('container');
    
    container.appendChild(createButton("button 1", () => console.log("button 1 clicked")));
    container.appendChild(createButton("button 2", () => console.log("button 2 clicked")));
    container.appendChild(createButton("button 3", () => console.log("button 3 clicked")));
};

document.getElementById('create').addEventListener("click", createButtons);
document.getElementById('remove').addEventListener("click", removeButtons);

#container {
  border: 1px dashed teal;
  min-height: 1em;
}

<button id="create">create buttons</button>
<button id="remove">remove buttons</button>

<div id="container"></div>