JS获取元素返回未定义

Question

我想使用 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";
    }
}

Answer 1

我已经修改了你的changeSpeed function。 它以 1 秒的间隔尝试 select 按钮（您可能想要更新此间隔）。 如果找到clearInterval被调用并且代码的 rest 被执行。

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);
}