Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

CSS files not loading correctly on github pages

I am making a calculator app with multiple themes and everything works locally but the problem is occuring on the github pages.
Each theme for the calculator has its own css file and I am using javascript to change href of the link tag based on the selected theme (theme-1 is selected by default):

HTML:

<link rel="stylesheet" id="themeStyleSheet" href="styles/themes/theme-1.css">

Javascript:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

const themeSelector = document.querySelector('#themeSelector');
const themeStyleSheet = document.querySelector('#themeStyleSheet');
let themeValue = 1;

function lastSelectedTheme(){
    themeValue = localStorage.getItem('selectedTheme');
    if(themeValue === '1'){
        themeStyleSheet.href = 'styles/themes/theme-1.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '2'){
        themeStyleSheet.href = 'styles/themes/theme-2.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '3'){
        themeStyleSheet.href = 'styles/themes/theme-3.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
}

When I view my page using github it automatically adds ‘/‘ in the beginning of the href while there is no ‘/‘ in the original javascript code which is causing the problem (if I remove ‘/’ manually from the developer console then it works)

enter image description here

How do I stop / being added to the href?

Github Repo: https://github.com/FaDiiiLeo/calculator

>Solution :

Github shouldn’t be changing your code at all. Looking at your repo, I assume you’re using the main branch for the page?

I imagine something probably happened that stopped your commit from deploying. Since your commit was exactly that change here:
https://github.com/FaDiiiLeo/calculator/commit/00e6c0120da611f340657b357605e387b6453a90

I would push another commit and check whether it’s fixed.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading