I have several external CSS I can switch among with buttons, but I want to try it with a range slider. I suspect I need something other than “onchange” but I don’t know what.
The slider script (which presently doesn’t switch the CSS). The function of the switching script will grab the ID of the default css stylesheet and change the href part to the new stylesheet. This works with buttons onclick, but it doesn’t work here onchange:
<script>
/* from https://www.w3schools.com/howto/howto_js_rangeslider.asp */
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
/* Update the current slider value (each time you drag the slider handle)
if(this.value > 50 && this.value < 101) */
slider.oninput = function() {
output.innerHTML = this.value;
if(this.value === 1){
document.getElementById('blue_button').onchange = function () {
document.getElementById('blue_css').href = 'css/runtime-blue.css';
};
}
if(this.value === 2){
document.getElementById('gray_button').onchange = function () {
document.getElementById('blue_css').href = 'css/runtime.css';
};
}
if(this.value === 3){
document.getElementById('green_button').onchange = function () {
document.getElementById('blue_css').href = 'css/runtime-green.css';
};
}
}
</script>
Even if I don’t bother to research unfamiliar code before I use it, I usually do when there’s a problem.
(hint: In other words, always at least scan the code to get a vague feeling for what it’s doing. When you see something that interests you / is unfamiliar, put aside some time to get to know it better.)
I didn’t test either but I have a feeling coot is right since a change of stylesheet paths would need a refresh, but that would just go back to the original settings so not sure how that ever worked?
Supposedly, three CSS files are being loaded, but two are marked as “alternate” so they are not applied. Originally, the functions were activated onclick, one button per stylesheet, and that’s when they were switched. This worked fine. But I wanted a way to have all the stylesheets in a row, even on mobile, without buttons.
I’m not really sure what you are getting at when you say “stylesheets in a row”?
The usual way of swapping stylesheets is with alternate stylesheets and changing the attributes as required (usually enabling one and disabling the others). Of course you would need to set cookies if you want the styles persistent over the site once changed. There are many styleswitchers around that will do this.
