在javascript中更改所有按钮的背景色

我这里有一个代码，允许我改变按钮的颜色。对我来说奇怪的是，它只改变了一个按钮，而不是所有按钮。但我想让它在同一个网站上改变所有的内容。 以下是带有HTML的代码笔代码：

/*设置您自己的颜色*/
颜色；
var defaultColor=（localStorage.getItem（“color”））？localStorage.getItem（“颜色”）：“#0078c0”；
window.addEventListener（“加载”，启动，错误）；
函数启动（）{
jscolor=document.querySelector（“.jscolor”）；
如果（jscolor）{
jscolor.value=defaultColor；
jscolor.addEventListener（“输入”，updateFirst，false）；
jscolor.addEventListener（“更改”，updateAll，false）；
jscolor.select（）；
}
刷新侧边栏（默认颜色）；
}
函数updateFirst（事件）{
刷新侧栏（event.target.value）；
}
函数刷新侧边栏（颜色）{
var side=document.querySelector（“.themecolor”）；
var bgColor=document.querySelector（“.bgColor”）；
var text=document.querySelector（“.onlyTextColor”）；
if（侧面、背景、颜色、文本）{
side.style.backgroundColor=颜色；
bgColor.style.backgroundColor=颜色；
text.style.color=颜色；
}
}
函数updateAll（事件）{
localStorage.setItem（'color'，event.target.value）；
$（“.themecolor.bgcolor.onlyTextColor”）。每个（函数（索引，元素）{
if（$（element.hasClass（“onlyTextColor”））{
$（element.css（'color'，event.target.value）
}
否则{
$（element.css（'background-color'，event.target.value））；
}
});
}

如果没有页面的html部分，我们只能猜测发生了什么。但我认为问题在于这个html部分

因为如果我将您的代码放入一个测试中，其中html部分看起来像这样，它的工作方式与预期的一样

函数updateAll（）{
//localStorage.setItem（'color'，event.target.value）；
$（“.somebuttons.bgcolor.onlyTextColor”）。每个（函数（索引，元素）{
if（$（element.hasClass（“onlyTextColor”））{
$（element.css（'color'，'red'））
}
否则{
$（element.css（'background-color'，'red'）；
}
});
}
$（'colorMyButtons'）。在（'click'，updateAll）上

给我的钮扣上色



btn01

btn02

btn03

btn04

btn05

btn06
如果您使用的是jquery。只要在jquery中编写，如果可能的话，不要与原生js结合。否则，您将对学习jquery感到困惑

演示：

没有任何评论或任何描述。有人怎么知道哪个函数在做什么？你是对的！我会编辑它。如果你能把相应的HTML，它会很好希望这有帮助：似乎是我的工作，一旦我添加了jQuery库。你确定你包含了它吗？我可能在你尝试这个的时候添加了更多的代码。不过我很感激。我有一个codepen链接，我的情况是：当我添加它工作的库时，我会尝试你现在在codepen中所做的事情。但在我的html页面中，它根本不存在，这很奇怪，好吧，但这有一个小问题。这对页面本身确实有效。但其他页面上没有。比如，如果我想让所有页面上的按钮都是红色的，那么CalStorage也必须在同一个域中工作。打开然后改变颜色。打开后，你们会注意到第二页的颜色是否和你们之前选择的颜色一样，但我明白为什么会这样。打开第一个站点。改变颜色。在第二面：删除该行：现在您将看到颜色没有改变。这意味着您所在的站点需要id:theming color，如果您在某处随机添加id=“theming color”，则所有颜色都会发生变化
$(function(){
    var defaultColor = (localStorage.getItem("color")) ? localStorage.getItem("color") : "#0078c0";

    function chColor(color){
      $(".themecolor, .bgcolor").css("background-color", color);
      $(".onlyTextColor").css("color", color);
      localStorage.setItem("color", color);
    }

    chColor(defaultColor);

    $("#theming-color").change(function(){
      chColor($(this).val());
    })
    .val(defaultColor)
    .css("background-color", defaultColor);


});