I am new to jS and trying some simple tasks but even these so-called simple tasks are proving difficult at times. Please help me understand why this doesn't work. This snippet is to change style sheets by using a toggle. As you can probably work out.

I have two style sheets, a toggle (checkbox) and a function with an if else statement. Why can I not get this to work? Thank you

function toggleTheme() {

  let theme = document.getElementsByTagName('link')[0];

  if (theme.getAttribute('href') == 'darkstyle.css') {
    theme.setAttribute('href', 'lightstyle.css');
  } else {
    theme.setAttribute('href', 'darkstyle.css');
  }
}

<link rel="stylesheet" href="darkstyle.css" />

<link rel="stylesheet" href="lightstyle.css" />

<label >
  <input  type="checkbox" />
  <span onchange="toggleTheme()" ></span>
</label>

CodePudding user response：

1. You've put an onchange listener onto a span element. A span element doesn't change. This listener should be on the checkbox.

2. You should be changing the href of the second <link> tag, which would have an index of 1. The second one always overrides the first one.

3. Small thing, but you don't need an else statement. Just return out of your if statement, then put your logic for the else under the if statement.

4. You don't need two link tags for this use case.

5. As someone already commented, this is a really weird way to toggle themes. Just have a single stylesheet, and toggle the theme on the body tag with a class.

<link rel="stylesheet" href="lightstyle.css" />

<label >
    <input onchange="toggleTheme()" type="checkbox" />
    <span ></span>
</label>

<script>
    function toggleTheme() {
        let theme = document.getElementsByTagName('link')[0];

        if (theme.getAttribute('href') === 'darkstyle.css') {
            return theme.setAttribute('href', 'lightstyle.css');
        }
        theme.setAttribute('href', 'darkstyle.css');
    }
</script>

CodePudding user response：

Another option if you are interested:

<link type="text/css" rel="stylesheet"  href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Z3JheSB9"> <!--- Replace url with lightsyle.css --->
<link type="text/css" rel="stylesheet"  href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGJsYWNrIH0=" disabled> <!--- Replace url with darkstyle.css --->

<label >
    <input onchange="toggleTheme()" type="checkbox" />
    <span ></span>
</label>

<script>
    function toggleTheme() {
        for (let style of document.querySelectorAll('link.theme') /* make sure that only theme styles are toggled */) {
            style.disabled = !style.disabled; //This will disable/enable the styles
        }
    }
</script>