Javascript, Background color change not working


Ask A Question





Login To post a 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.

For more info please click herehttps://stackoverflow.com/q/50842020



Have a question or need a custom quote?
info@smartinfocare.com