Этот код для расширения Chrome не работает, и я понятия не имею

Question

Я работаю над этим небольшим расширением Chrome для веб-страницы Roblox, и по какой-то причине оно вообще не хочет работать должным образом.

ошибка

Uncaught TypeError: Cannot set property 'background' of undefined
at extension_update (themeManager.js:7)
at themeManager.js:14

и это код:

var colorOnePath = document.getElementsByClassName("navbar-fixed-top rbx-header");
var colorTwoPath = [document.getElementsByTagName("body"), document.getElementsByClassName("content")];    

var color = ["#008919", "#000000"];

function extension_update() {
    colorOnePath.style.background = color[0];
    colorTwoPath[0].style.background = color[1];
    colorTwoPath[1].style.background = color[1];

    setTimeout(1000, extension_update)
};

extension_update()

Я понятия не имею, почему код настроен так, но в любом случае есть ли проблема? Я не мог найти, где исправить. Спасибо!

Answer 1

getElementsByClassName всегда будет возвращать массив элементов в виде массива - даже если он только один. Так что в вашем коде вместо установки style.background свойство первого элемента в коллекции, вы пытаетесь установить его на саму коллекцию - так как коллекция не имеет style собственность, вы получаете ошибку, которую вы видите. Попробуйте изменить свой код на это:

var colorOnePath = document.getElementsByClassName("navbar-fixed-top rbx-header")[0];
var colorTwoPath = [document.getElementsByTagName("body")[0], document.getElementsByClassName("content")[0]];    

var color = ["#008919", "#000000"];

function extension_update() {
    colorOnePath.style.background = color[0];
    colorTwoPath[0].style.background = color[1];
    colorTwoPath[1].style.background = color[1];

    setTimeout(1000, extension_update);
}

extension_update();

(Я также позволил себе добавлять точки с запятой там, где они отсутствовали, и удалять их там, где они были не нужны).