javascript - 为什么未将此JavaScript函数添加到我的属性中？

Question

我正在用 Electron 制作一个应用程序，我实现了一个功能，可以向该应用程序添加标签，并且可以正确添加标签。
问题是，当我直接将它们及其类和属性添加到我的html文件中时，但是当我通过javascript添加它们时，当我尝试直接从javascript中的同一函数直接添加onclick属性时，它们全部折叠了，显示为选项卡，但不执行隐藏和显示选项卡内容的代码，就像手动添加的选项卡一样。
我很确定该函数会添加它需要正确执行的所有内容，但请证明我错了。
这是添加选项卡的函数，它应该调用openTab()onclick，在手动添加时可以工作:

function addTab() {
  const button = document.createElement("button");

  button.className = "tab-link";
  button.innerHTML = "New Tab";
  button.onclick = "openTab(event,'test')"

  document.getElementsByClassName("tab")[0].appendChild(button);

}

这是我正在使用的功能，如果可能有帮助，它可以隐藏并显示内容:

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab-link");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer 1

传递给onclick的setter的值应该是一个函数，而不是字符串。您还需要在调用Click监听器时用事件和openTab调用'test'，而不是立即调用click监听器。做:

button.onclick = e => openTab(e, 'test');

另外，使用 classList胜过混淆 className字符串:

const active = document.querySelector('.tab-link.active');
if (active) {
  active.classList.remove('active');
}
evt.currentTarget.classList.add('active');

另外，您可以考虑添加带有 tabcontent CSS规则的类而不是遍历 display: block元素-这样，您可以使用 querySelector选择一个打开的标签页(如果有)并删除该类，就像上面所做的一样。
由于您使用的是Electron，因此随时随地使用ES6 +语法-无需使用 var。