Javascript，背景颜色更改不起作用

Question

I've been working on this little project, and I've been trying to make the background color change onclick. But for some reason it won't work. The part that I'm trying to use is p.style.background ='$color'

HTML (Might be a little weird, cause it's written in pug, and this is compiled)

<div id="MainContainer">
<div id="Left">
  <p id="FontSettings">Font settings</p>
  <p id="Font">Ab</p>
  <p id="FontName">
    Roboto <span id="FontWeight">Normal</span></p>
</div>
<div id="Right"><sup id="StandardFontSup">Standard font</sup>
  <select id="FontSelect" onchange="EchoFontName(); changeFont (this);">
    <option value="Roboto">Roboto</option>
    <option value="Lato">Lato</option>
    <option value="Raleway">Raleway</option>
    <option value="Ubuntu">Ubuntu</option>
  </select><sup id="StyleSup">Style</sup>
  <select id="StyleSelect" onchange="EchoStyleName(); changeStyle (this);">
    <option value="Thin">Thin</option>
    <option value="Light">Light</option>
    <option value="Normal" selected="selected">Normal</option>
    <option value="Bold">Bold</option>
  </select>
  <div id="ColorTilesContainer">
    <div id="blue" onclick="blueCheckToggle()"></div>
    <div id="blueCheck" onclick="blueCheckToggle()"></div>
    <div id="orange" onclick="orangeCheckToggle()"></div>
    <div id="orangeCheck" onclick="orangeCheckToggle()"></div>
    <div id="green" onclick="greenCheckToggle()"></div>
    <div id="greenCheck" onclick="greenCheckToggle()"></div>
    <div id="teal" onclick="tealCheckToggle()"></div>
    <div id="tealCheck" onclick="tealCheckToggle()"></div>
    <div id="custom" onclick=""></div>
  </div>
</div>

Javascript

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontFamily = font.value;
}
function EchoFontName() {
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementById("FontSelect").value;
  f.textContent = FontNameVar;
}
var changeStyle = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontWeight = font.value;
}
function EchoStyleName() {
  var f = document.getElementById("FontWeight");
  var FontNameVar = document.getElementById("StyleSelect").value;
  f.textContent = FontNameVar;
}
var x = document.getElementById("blueCheck");
var t = document.getElementById("orangeCheck");
var r = document.getElementById("greenCheck");
var l = document.getElementById("tealCheck");
var p = document.getElementById("Left");

function blueCheckToggle() {
  if (x.style.opacity === "0") {
  x.style.opacity = "1";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$lightblue";
  }
  else {
    x.style.opacity = "0";
  }
}
function orangeCheckToggle() {
  if (t.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "1";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$orange";
  }
  else {
    t.style.opacity = "0";
  }
}
function greenCheckToggle() {
  if (r.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "1";
  l.style.opacity = "0";
  p.style.background = "$green";
  }
  else {
    r.style.opacity = "0";
  }
}
function tealCheckToggle() {
  if (l.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "1";
  p.style.background = "$teal";
  }
  else {
    p.style.opacity = "0";
  }
}

You can also visit my codepen, to see the complete project, and fork it. https://codepen.io/JorisMertz/pen/dKRNBv?editors=0010

Thanks in advance! Joris.

Answer 1

如果要更改css属性“ background-color”，则需要使用JS DOM CSS W3School HTML DOM样式对象 ：

p.style.backgroundColor = "lightblue";

Answer 2

I was using Sass variables, And since it adds the style inline, it doesn't pull the variables. Thanks for the help.