javascript - 如何直接在JavaScript代码中而不是html标签中实现onclick函数？

Question

以下链接包含我存储在 codepen 上的项目:

[https://codepen.io/adan96/pen/ExaRgOe?editors=1010]

以前我的 onclick 函数位于 html 标签中，但我想让它直接在 JS 代码中工作:

document.getElementById("requestTypeSelection").selectedIndex = -1;
document.getElementById("requestSubtypeSelection").selectedIndex = -1;
document.getElementsByClassName("batch")[0].selectedIndex = -1;
document.getElementsByClassName("batch")[1].selectedIndex = -1;

document.getElementById("button1").onclick = function() {openTab("click", generalData)};
document.getElementById("button2").onclick = function() {openTab("click", materialData)};

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    if (tabName != "generalData") {
      tablinks[0].style.backgroundColor = "#cfdeed";
    } else {
      tablinks[0].style.backgroundColor = "#8eb3dc";
    }
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

window.onload = function() {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById("generalData").style.display = "block";
  event.currentTarget.className += " active";
  tablinks[0].style.backgroundColor = "#8eb3dc";
};

var $select1 = $("#select1"),
  $select2 = $("#select2"),
  $options = $select2.find("option");

$select1
  .on("change", function() {
    $select2.html($options.filter('[value="' + this.value + '"]'));
  })
  .trigger("change");

点击按钮1和按钮2后，我应该在它们下面看到它们的选项卡，但什么也没有出现。您能提供如何修改代码的建议吗？

Answer 1

使用EventTarget.addEventListener将事件绑定(bind)到元素。 onclick 不是这样工作的。

document.getElementById("button1").addEventListener("click", function() {
  console.log("Clicked");
});

<button id="button1">Click Me</button>

如果openTab("click",materialData)的第一个参数是实际的事件对象，那么你应该这样做:

document.getElementById("button1").addEventListener("click", function(event) {
  console.log("Clicked");
  openTab(event, materialData)
});