Search code examples
javascripthtmltampermonkey

JS get element return undefine


I want to change the values of the buttons on the page with Tampermonkey, but I can't change it because it says the button is undefined?

HTML part

<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>

My Tampermonkey Script

// ==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";
    }
}

Solution

  • I have modified your changeSpeed function. It tries to select the buttons at 1 second interval (you might want to update this interval). If found clearInterval is called and the rest of the code is executed.

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