如何获取按钮并对其应用事件
如何获取按钮并对其应用事件
提问于 2021-02-08 22:27:34
我使用这段代码在按钮被单击时添加一个函数，但它不起作用。
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 Console output
当我点击这些按钮时，也没有任何反应。如果我在chrome中使用断点对其进行调试，则输出会发生变化，并且会显示按钮为空。
编辑:问题是它甚至没有进入for循环。
EDIT2:调用load事件时不显示按钮。window.addEventListener('load')执行得太早
回答 4
Stack Overflow用户
发布于 2021-02-08 22:38:49
在附加单击处理程序时调用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);Stack Overflow用户
发布于 2021-02-08 22:40:30
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>
Stack Overflow用户
发布于 2021-02-09 23:01:23
为了确保您的脚本在所有其他脚本执行后运行，您可以使用setInterval()。我将其设置为100毫秒(您可以在底部看到。因此，您的代码将在页面加载后等待100ms，然后执行。
正如在其他答案中所建议的，在将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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66103521
复制相关文章
相似问题
腾讯云开发者
