Pöördun taas murega.

Nagu eelmises teemas kirjeldatud, siis kasutan Javascripti, et dark-mode'i implementeerimiseks kasutusel olevat .css faili vahetada.

Kõik toimib täpselt nii kaua kui Javascripti kood on sisestatud HTML faili. Kui viin scripti eraldiseisvasse .js faili, siis tuleb veateade, mis ütleb, et otsitavat .css faili ei leitud.

Arusaamatu, kuidas see võimalik on, sest tegelikkuses Javascript ei olegi seda .css faili otsima suunatud, vaid üksnes muudab ära HTML failis .css faili otsimise atribuudi ja eeldatavasti peaks ta ju seda tegema täpselt samamoodi, hoolimata sellest, kas script ise asub HTML failis või eraldi.

Hämming.

HTML:

Kood:

<link id="pagestyle" rel="stylesheet" type="text/css" href="light.css"/>

Javascript:

Kood:

function goDark(){
  document.getElementById('pagestyle').setAttribute('href', 'dark.css');
}

KUI ANTUD JS KOOD ON HTML FAILIS, TÖÖTAB ASI ILUSTI, KUI AGA ERALDI FAILIS, SIIS TULEB LOGISSE TEADE "DARK.CSS NOT FOUND"

Väga võimalik, et siin mängib rolli sinu failide asukohad. (Ainuke järeldus, mille mina suutsin teha)


Ehk siis, sinu index.html fail on rootis ilmselgelt. Eeldame, et dark.css & light.css on /css/ kaustas.
javascript on /js/ kaustas. Seljuhul ehk peaksid attributeks märkima "../css/dark.css"? 

Ei tulnud see seletamine kõige paremini välja, kuid äääääkkkkiii mingi ime viisiga õnnestub Sul minust aru saada?  

kqrmo kirjutas:Väga võimalik, et siin mängib rolli sinu failide asukohad. (Ainuke järeldus, mille mina suutsin teha)


Ehk siis, sinu index.html fail on rootis ilmselgelt. Eeldame, et dark.css & light.css on /css/ kaustas.
javascript on /js/ kaustas. Seljuhul ehk peaksid attributeks märkima "../css/dark.css"? 

Ei tulnud see seletamine kõige paremini välja, kuid äääääkkkkiii mingi ime viisiga õnnestub Sul minust aru saada?  

Saan aru küll, aga nii see siiski ei ole. Kuna antud js kood muudab ainult HTML failis asuva rea ühte atribuuti, siis temal endal ei ole selle css failiga ega selle asukohaga mitte mingit pistmist.
Kordan, et script töötab, kui ta asub HTML failis tagide vahel, aga kui eraldi failis, siis mitte.

Uurisin veidi, hmm.. Pole küll varem endal kokkupuudet olnud sellega, kuid ehk on abiks ;D

Kood:

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

Kood:

<link rel="stylesheet" type="text/css" href="light.css"/>

Kood:

 <a href="#" onclick="changeCSS('light.css', 0);">Light</a>
 <a href="#" onclick="changeCSS('dark.css', 0);">Dark</a>