如何获取按钮并将事件应用到它们答案

【问题标题】：How to get buttons and apply an event to them如何获取按钮并将事件应用到它们
【发布时间】：2021-02-08 14: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：调用加载事件时，按钮不会出现。 window.addEventListener('load') 执行得太早了

Load is called before the page is loaded

【问题讨论】：

HTML 是什么样的？按钮是否具有getElementsByClassName 中列出的类？
它不会进入循环，因为buttons.length 为零。您可能在 document.getElementsByClassName() 中定位了错误的类名
@OzgurSar 看我贴的图，不是空的，里面有2个按钮
@Peca21 抱歉，我没有注意到图片中buttons.length 的部分已经显示为 0。您是否有任何脚本在页面初始加载后修改 DOM？
@OzgurSar 网站来自我的工作，所以我无法显示它，但是是的，页面加载后正在加载。

标签： javascript tampermonkey

【解决方案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);

【讨论】：

问题是它甚至没有进入for循环。
jsbin.com/borezec/edit?html,js,console,output
这是工作示例，如果仍然无法工作，请告诉我
load 事件被提前调用，甚至在页面完全加载之前。

【解决方案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>

【讨论】：

问题是它甚至没有进入for循环。
@Peca21 然后你做错了，因为正如你在 sn-p 中看到的那样，它可以工作。

【解决方案3】：

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

正如其他答案中所建议的那样，在将 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);

【讨论】：

【解决方案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));

发件人：Here

Full Code Here

【讨论】：