为什么JS中的按钮onclick事件不起作用[重复]

Question

当我单击输入按钮时，控制台中什么都没有，但是我希望“你好”。

这是我的代码：

window.onload = function() {
  const btn = document.getElementsByClassName('btn-next');
  btn.onclick = function() {
    btn.click();
    console.log("Hello");
  }
};

<input type="button" class="btn-next" value=">" />

我做错了什么？

Answer 1

您需要执行document.getElementsByClassName('btn-next')[0];，因为getElementsByClassName 将提供与该类名称匹配的元素数组，并且由于该类只有一个元素，请使用[0] 获取该元素的引用。

window.onload = function() {
  const btn = document.getElementsByClassName('btn-next')[0];
  btn.onclick = function() {
    btn.click();
    console.log("Hello");
  }
};

<input type="button" class="btn-next" value=">" />

您也可以将querySelector 用于相同目的：

window.onload = function() {
  const btn = document.querySelector('.btn-next');
  btn.onclick = function() {
    btn.click();
    console.log("Hello");
  }
};

<input type="button" class="btn-next" value=">" />