JS获取元素返回未定义答案

【问题标题】：JS get element return undefineJS获取元素返回未定义
【发布时间】：2021-05-31 12:44:23
【问题描述】：

我想用 Tampermonkey 更改页面上按钮的值，但我无法更改，因为它说按钮未定义？

HTML 部分

<div class="playbackRateButtons">
  <span>Playback Speed ： </span>
  <button class="btn blue" value="0.5">0.5X</button>
  <button class="btn blue" value="0.75">0.75X</button>
  <button class="btn blue active" value="1">1X</button>
  <button class="btn blue" value="1.25">1.25X</button>
  <button class="btn blue" value="1.5">1.5X</button>
</div>

我的 Tampermonkey 脚本

// ==UserScript==
// @name         Auto Change Speed
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://xxxxxx/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant        GM_xmlhttpRequest
// @connect      xxxxxx.html
// ==/UserScript==

GM_xmlhttpRequest ( {
    method: "GET",
    url: "https://xxxxxx.html",
    onload: changeSpeed()
});

function changeSpeed(response) {
    var btns = document.getElementsByClassName("btn blue");
    var speed = ["1", "2", "3", "5", "10"];
    for (var i=0; i<5; i++) {
        btns[i].value = speed[i];
        btns[i].innerHTML = speed[i]+"X";
    }
}

【问题讨论】：

运行此脚本的网页上的按钮是否存在问题？如果是，它们是 HTML 源代码的一部分，还是由网页上的脚本动态添加的？
它们是 HTML 源代码的一部分。
for 循环是在创建错误之前迭代多次，还是在第一个项目上立即中断？（具体的错误信息是什么？）
这些是控制台中的错误消息。 imgur.com/J3hxEg2 imgur.com/ITc7ohB 并立即导致第一项出错。

标签： javascript html tampermonkey

【解决方案1】：

我修改了你的changeSpeed 函数。它尝试以 1 秒的间隔选择按钮（您可能想要更新此间隔）。如果找到clearInterval，则调用并执行其余代码。

function changeSpeed(response) {
    var intervalID = setInterval(function () {
        var btns = document.getElementsByClassName("btn blue");
        if (btns.length > 0) {
            clearInterval(intervalID);
            var speed = ["1", "2", "3", "5", "10"];
            for (var i = 0; i < btns.length; i++) {
                btns[i].value = speed[i];
                btns[i].innerHTML = speed[i] + "X";
            }
        }
    }, 1000);
}

【讨论】：