使用Javascript更改按钮单击时的模式背景色

我创建了一个线性渐变，用javascript为其设置动画，并将其设置为我网站的背景。然后，我在HTML中添加了一个按钮，当单击渐变的颜色时，该按钮将关闭

现在我试图让按钮也改变我的页面上模式的背景颜色，但我似乎无法理解。谁能帮我看看哪里出了问题？ 我想我只是在定位modal div上的.modal类时遇到了一个问题

当我试图添加函数来更改模式背景时，我将首先放置的是断开的javascript。然后，我将放置html、css和javascript，这些代码不会中断（没有更改模式背景的代码）

破损的Javascript

var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000", modalz = "rgba(0, 0, 0, 0.6)";

var changeBackground = function() {
  angle = angle + .3
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('li').forEach(li => li.style.color = font);
}

var changeShadow = function() {
  document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}

var changeModal = function() {
  document.body.style.modal.backgroundColor = "rgba(0, 0, 0, 0.6)";
}

changeBackground()
changeFont()
changeShadow();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
  colors = (colors != "#000") ? "#000" : "#759ef3";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
  shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
  modalz = (modalz != "rgba(0, 0, 0, 0.6)") ? "rgba(0, 0, 0, 0.6)" : "rgba(240, 240, 240, 1)";
  changeFont()
  changeModal()
  changeShadow();
})

Html

Javascript（未损坏）

---

你可以试试这个。给你的模态一个id。假设你给它

elem

var elem = document.getElementById("elem");
elem.style.backgroundColor = "rgba(0, 0, 0, 0.6)";

这个语法肯定有问题

document.body.style.modal.backgroundColor= "blue";

---

我可能遗漏了一些明显的内容，但据我所知，

document.body.style.modal

不会返回任何内容。您应该使用

modal

类访问元素，然后指定颜色。

document.querySelector（'.modal'）.style.backgroundColor=“blue”；

接下来的问题是这个部分文档。getElementById（'elem'）。forEach（'elem'=>elem.style.backgroundColor=element）；不确定forEach后面的语法

var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";

var changeBackground = function() {
  angle = angle + .3
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('li').forEach(li => li.style.color = font);
}

var changeShadow = function() {
  document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}


changeBackground()
changeFont()
changeShadow();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
  colors = (colors != "#000") ? "#000" : "#759ef3";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
  shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
  changeFont()
  changeShadow();
})

var elem = document.getElementById("elem");
elem.style.backgroundColor = "rgba(0, 0, 0, 0.6)";

document.body.style.modal.backgroundColor= "blue";