如何获取按钮并将事件应用于它们

Question

单击按钮时，我使用此代码添加一个函数，但它不起作用。

function onClick(){
console.log("Button pressed.");
localStorage.counter = ++counter;
console.log(counter);
}
window.addEventListener('load', function() {
console.log("Loaded");
var buttons = document.getElementsByClassName("v-btn v-btn--small theme--dark orange");
console.log(buttons);
console.log("buttons.length:")
console.log(buttons.length);
var i;
for(i = 0;i < buttons.length;i++){
buttons[i].onclick = onClick();
console.log("Event added")
}
}, false);

当页面加载时，我只在控制台中得到：Chrome控制台输出

当我点击按钮时也不会发生任何事情。如果我在chrome中使用断点对其进行调试，则输出将发生更改，并且会显示按钮为空。

编辑：问题是它甚至没有进入循环。

EDIT2：调用加载事件时，按钮不会显示。window.addEventListener('load')过早执行

加载页面之前调用加载

Answer 1

在附加单击处理程序时调用onClick。你只需要提供函数，而不是调用它

HTML:

<button class="v-btn v-btn--small theme--dark orange">
Test1
</button>
<button class="v-btn v-btn--small theme--dark orange">
Test2
</button>

JS:

function onClick(){
console.log("Button pressed.");
localStorage.counter = ++counter;
console.log(counter);
}
window.addEventListener('load', function() {
console.log("Loaded");
var buttons = document.getElementsByClassName("v-btn v-btn--small theme--dark orange");
console.log("buttons.length:")
console.log(buttons.length);
var i;
for(i = 0;i < buttons.length;i++){
buttons[i].onclick = onClick;
console.log("Event added")
}
}, false);

Answer 2

function onClick(){
console.log("Button pressed.");
// localStorage.counter = ++counter;
// console.log(counter);
}
window.addEventListener('load', function() {
console.log("Loaded");
var buttons = document.getElementsByClassName("v-btn v-btn--small theme--dark orange");
console.log("buttons.length:")
console.log(buttons.length);
var i;
for(i = 0;i < buttons.length;i++){
buttons[i].addEventListener('click', function () {
onClick();
});
console.log("Event added")
}
}, false);

<button class="v-btn v-btn--small theme--dark orange">
Test1
</button>
<button class="v-btn v-btn--small theme--dark orange">
Test2
</button>

Answer 3

为了确保您的脚本在执行完所有其他脚本后运行，您可以使用setInterval()。我把它设置为100毫秒(你可以在底部看到。所以，你的代码会在页面加载后等待100毫秒，然后执行。

正如其他答案中所建议的，在将onClick分配给元素的事件处理程序时，不应调用onClick。所以，我也改变了这一点。

function onClick(){
console.log("Button pressed.");
localStorage.counter = ++counter;
console.log(counter);
}

window.addEventListener('load', function() {
var i = setInterval(function ()
{
clearInterval(i);
console.log("Loaded");
var buttons = document.getElementsByClassName("v-btn v-btn--small theme--dark orange");
console.log(buttons);
console.log("buttons.length:")
console.log(buttons.length);
var i;
for(i = 0;i < buttons.length;i++){
buttons[i].onclick = onClick;
console.log("Event added")
}
}, 100);
}, false);

Answer 4

已解决

我用这个创建了一种睡眠功能

const delay = ms => new Promise(res => setTimeout(res, ms));

然后检查一下每隔半秒就会出现一个按钮，就像这个一样

do {
buttons = document.getElementsByClassName("v-btn v-btn--small theme--dark orange");
await delay(500);
} while(!(buttons.length == 2));

发件人：此处

此处为完整代码