Vanilla JavaScript storaged locally the wrong attribution from a selected option to switch the theme when you refresh the site

Viewed 36

My goal is to switch one of 4 theme files with one of two different folders and locally and permanently storage both folder and theme names.

Everything worked until I refreshed the site, localStorage stored the wrong folder name and the wrong theme name, for example, if you choose “ion” from “voxel”, then when you refresh, you'll see “cyberpunk” selected, while the console showed “gusbemacbe/ion.css”

Here how tree is like:

assets/css/tokens
├── gusbemacbe
│   └── cyberpunk.css
└── voxel
    ├── ion.css
    ├── itau.css
    └── iti.css

And in the HTML code with explanations:

<!-- the "active_stylesheet" identifier will be caught to change the stylesheet address. Observe "voxel" (folder) and "ion" (theme) -->
<link rel="stylesheet" media="screen" type="text/css" href="assets/css/tokens/voxel/ion.css" id="active_stylesheet">

<!-- 
- the "ThemeSelect" identified will be caught to get the option value for the theme name.
- the 'onchange="setFolder()"' command will be caught to get "data-id" value for the folder name.
-->
<select id="ThemeSelect" onchange="setFolder()">
    <option data-id="gusbemacbe" value="cyberpunk" selected>cyberpunk</option>
    <option data-id="voxel"      value="ion">íon</option>
    <option data-id="voxel"      value="itau">itaú</option>
    <option data-id="voxel"      value="iti">iti</option>
</select>

<script src="assets/js/global.js"></script>

And in the JavaScript code with explanations:

// this function will change the stylesheet address with the folder and theme values
function changeCSS(sheet) {
    document.getElementById('active_stylesheet').setAttribute('href', sheet);
}

// this function will catch the function command at that select element to get the data-id value. 
function setFolder() {
    const e = document.getElementById("ThemeSelect");
    const folder = e.options[e.selectedIndex].getAttribute("data-id");

    return folder;
}

// this function will create the new address, catching the folder and theme values, and setting to store the values
function setTheme(theme) {

    changeCSS("assets/css/tokens/" + setFolder() + "/" + theme + ".css")

    localStorage.setItem('folder', setfolder());
    localStorage.setItem('theme', theme);
}

// this event will catch the option value with the identifider
ThemeSelect.addEventListener('change', function () {
    setTheme(this.value)
});

// this will store permanently the storages setted by the functions
const getTheme = () => {
    const theme = localStorage.getItem('theme');
    theme && setTheme(theme);

    const folder = localStorage.getItem('folder');
    folder && setFolder(folder);
}

getTheme();
1 Answers
  • dataset use to get and set data-... value.
  • fun(this) send element.
  • element.value return select item value.
  • element.dataset.id return selected item data-id value.

HTML

<select id="ThemeSelect" onchange="setFolder(this)">

JavaScript

function setFolder(element) {
    const folder = element.options[element.selectedIndex].dataset.id + "/" + element.value; // edited
    return folder;
}

I think this code help you! thank you!

Related