在 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);
  })

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

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

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

无论console.log 是在function 内部还是外部，我都会得到“未定义”。

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>