Question 189687 in Html Question posted in
Some basic documentation can be found here.

Html – Onclick change border-bottom to a div by classname and set dark mode on/off

I have this dark mode JavaScript and it changes the background color and text font color perfect but I need it to also change the border-bottom of the div class name .veritas and that part is not working

Here is the code:

var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderBottom = document.getElementById(".veritas");


toggleBtn.addEventListener("click", function() {
  var bgColor, textColor;

  if (body.classList.contains("dark-mode")) {
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "Dark mode is on";
    bgColor = "#FFFFFF";
    textColor = "#101010";
    borderBottom = "#101010";

  } else {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
    bgColor = "#101010";
    textColor = "#FFFFFF";
    borderBottom = "#FFFFFF";
  }

  body.style.backgroundColor = bgColor;
  body.style.color = textColor;
  borderBottom.style.borderBottom = borderBottom;


  // Save the chosen colors to localStorage
  localStorage.setItem("bgColor", bgColor);
  localStorage.setItem("textColor", textColor);
  localStorage.setItem("borderBottom", borderBottom);
});

// Retrieve saved colors from localStorage
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
var savedBordersColor = localStorage.getItem("borderBottom");

if (savedBgColor && savedTextColor) {
  body.style.backgroundColor = savedBgColor;
  body.style.color = savedTextColor;
  borderBottom.style.borderBottom = borderBottom;
  if (savedBgColor === "#101010" && savedTextColor === "#FFFFFF") {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
  }
}
body {
  margin: 0;
  height: 100%;
}

.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

.veritas {
  width: 90%;
  border-bottom: 1px solid #101010;
}
<button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
  border-bottom should change color in dark/light mode
</div>

Any idea why this does not change the border-bottom in the div class name .veritas?

I created a Codepen to see it in action
https://codepen.io/familias/pen/gOQMrjX

Tags:

2

Answers


  1. 0

    There are a couple of errors

    1 .veritas is a class and you are access it using

    borderBottom=document.getElementById(".veritas");.

    Change it to using className

    var borderBottom=document.getElementsByClassName("veritas")[0];

    or querySelector

    var borderBottom=document.querySelector(".veritas");

    2 . borderBottom.style.borderBottom = borderBottom; this should contain width style color, while you are only supplying color,
    change all the occurrences of

    borderBottom = "#FFFFFF";

    to

    borderBottom = "1px solid #FFFFFF";
    Login or Signup to reply.
  2. 0

    It works like this

    var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderDiv=document.getElementsByClassName("veritas")[0];

toggleBtn.addEventListener("click", function() {
  var bgColor, textColor,borderBottom;

  if (body.classList.contains("dark-mode")) {
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "Dark mode is on";
    bgColor = "#FFFFFF";
    textColor = "#101010";
      borderBottom = "#101010";
      
  } else {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
    bgColor = "#101010";
    textColor = "#FFFFFF";
      borderBottom = "#FFFFFF";
  }
  body.style.backgroundColor = bgColor;
  body.style.color = textColor;
  borderDiv.style.borderBottomColor = borderBottom;

});
    body {
margin:0;
height:100%;
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
.veritas{width:90%;
border-bottom:1px solid #101010;
}
    <button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
border-bottom should change color in dark/light mode
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search