Switch between css files (onclick) javascript

Question

I have a simple function of switching between two different css files by clicking on the button on site. The css is replaced with another when I click once. But when I click for the second time, the first css does not resume. So in other words, I need that clicking on one and the same button, I have changing of theme css (e.g. blue and green and vice versa). I tried tens of variants, but I'm new to JS and have some difficulties with that. Here is my code

function switchTheme() {
    let css = document.getElementById('css_file').href = "css/style.css";
    if (css) {
        return document.getElementById('css_file').href = "css/green-theme.css";
    } 
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

You always set the css variable to "css/style.css", and then do if ("css/style.css"), which is always true because a non-empty String is always truthy — blex
– blex, Commented Dec 8, 2020 at 12:20
the point is that the button works once I clicked, the theme css is replace with another, but when click on the button for the second time, I want the first css back instead of second, and so on. — MaksimL
– MaksimL, Commented Dec 8, 2020 at 12:21

score 1 · Accepted Answer · 2020-12-08 12:30:21Z

1

The reason is simple: You don't have proper code to switch back. It should look more like this (not tested):

var currentState = true;
function switchTheme() {
    if (currentState) {
        document.getElementById('css_file').href = "css/green-theme.css";
    } 
    else{
        document.getElementById('css_file').href = "css/style.css";
    }
    currentState = !currentState;
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

The problem is that you always set it to the normal theme and then back to the green theme which makes no sense to do because that changes nothing. What you want to do is save if you currently use the normal theme, if that's the case, then you enable the green theme, otherwise the normal one. currentState = !currentState means that you set current state to its opposite value, so true if it was false and false if it was true.

What your old code did was this:

function switchTheme() { //Button was pressed
    let css = document.getElementById('css_file').href = "css/style.css";//Set the 
    //current theme to the normal one. Because it's css = href = "style", you set css to "style" (I think, or maybe just true because it's a valid operation, so don't quote me on that)
    if (css) { //If css contains something true, this code is executed.
    //Note that css is always "[...]style", so it's always a non-empty string which is true
        return document.getElementById('css_file').href = "css/green-theme.css"; //Then set the style to green - this always happens so you can essentially delete every other line and nothing would change.
    } 
}

edited Dec 8, 2020 at 12:30

answered Dec 8, 2020 at 12:25

user14699696

Sign up to request clarification or add additional context in comments.

2 Comments

MaksimL Over a year ago

Oh, yes, thank you very much, your code works fine! Understood, my if is always true.

user14699696 Over a year ago

Then mark this as the answer by pressing the tick below that time symbol (next to where the vote up/down is) or vote this up. Or both.

John · Accepted Answer · 2020-12-08 12:21:52Z

1

Here, try this code:

function switchTheme() {
    let css = document.getElementById('css_file').href;
    if (css == "css/style.css" ) {
        return document.getElementById('css_file').href = "css/green-theme.css";
    } 
    else {
    return document.getElementById('css_file').href = "css/style.css";
    }
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

answered Dec 8, 2020 at 12:21

John

5,3621 gold badge8 silver badges18 bronze badges

Comments

johannchopin · Accepted Answer · 2020-12-08 12:33:32Z

0

The operator a=b doesn't check the equality but just affect b to a so document.getElementById('css_file').href = "css/style.css" is not doing what you suppose.

To check something use ===:

function switchTheme() {
  const file = document.getElementById('css_file')
  let isStyle = file.href === "css/style.css"
  let path
  if (isStyle) {
    path = "css/green-theme.css"
  } else {
    path = "css/style.css"
  }

  file.setAttribute('href', path)
}

let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

<button class="change_theme">
  change_theme
</button>

<a id="css_file" href="css/style.css"></a>

answered Dec 8, 2020 at 12:33

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Collectives™ on Stack Overflow

Switch between css files (onclick) javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related