After searching around, I have managed to find solutions on toggling between 2 CSS files. However, my requirement is a bit different - I need to use just one button to switch between 4 distinct CSS files. The primary CSS file that is loaded with the HTML is named style1.css.
I came across a JavaScript snippet that achieves a similar functionality with images. Essentially, it works by placing all the images in an array and moving the first image to the end of the array for rotation. Here's how I implemented it:
var imageUrls = ["images/paulfr.jpg", "images/johnfr.jpg",
"images/georgefr.jpg", "images/ringofr.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
So, I attempted to adapt this concept for stylesheet files but encountered some issues:
var stylesUrls = ["css/style1.css", "css/style2.css",
"css/style3.css", "css/style4.css"];
function changeStylesheet(){
var style = document.getElementById('styles');
var stylesUrl = stylesUrls.shift();
style.src = stylesUrl;
stylesUrls.push(stylesUrl);
}
I made sure that the stylesheet id is set to 'styles'. Can someone please assist me in identifying where I went wrong?