Diskuze: Prečo script ktorý funguje v <body> nefunguje ako subor.js?

JavaScript JavaScript Prečo script ktorý funguje v <body> nefunguje ako subor.js?

Avatar
Libor Šimo (libcosenior):

Toto funguje:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;

</script>

</body>
</html>

Toto nie:
html

<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>JavaScript - samostatný súbor</title>
            <script type="text/javascript" src="script.js"></script>
      </head>

      <body>
        <p id="demo"></p>
      </body>
</html>

script.js

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML = answer1 + "<br>" + answer2 + "<br>" + answer3;

Vie niekto prečo?

Odpovědět 5.12.2015 13:03
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
IT Man:

Nejsem si jist, ale mám za to, že ten skript se spustí hned, jak se načte, takže se ani nestihne načíst ten odstavec. Zkus to JS udělat takto:

window.onload = function() {
        var answer1 = "It's alright";
        var answer2 = "He is called 'Johnny'";
        var answer3 = 'He is called "Johnny"';

        document.getElementById("demo").innerHTML = answer1 + "<br>" + answer2 + "<br>" + answer3;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 5.12.2015 13:08
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Jiří Gracík:

Nebo můžeš přidat atribut defer.

Nahoru Odpovědět 5.12.2015 14:34
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Honza Bittner:

Je to způsobeno tím, že prohlížeč zpracovává dokument (-> vytváří DOM) postupně od shora dolu.

Nahoře narazí na tvůj JS (je úplně jedno, jestli je importován nebo vložen), ten načte a zpracuje jej.

Může se stát, že v okamžiku, kdy se skript zpracovává ještě není DOM vytvořený, nebo není kompletní, proto se nemusí najít žádný element s #demo a tedy se skript "neprovede".

Pokud umístíš JS na spodek stránky, všechno se provede tak, jak má, jelikož je již připraven DOM a skript se má na čem provést.

Dá se tomu samozřejmě zabránit, pokud spustíš skript až po načtení dokumentu, jak psal IT Man.

Velmi často jsou dotazy typu proč to na lokálu ("u mě v počítači") funguje a na serveru ne. To je dáno tím, že u tebe v počítači je přístup k souborům okamžitý, takže se okamžitě vytvoří DOM a skript najde chtěný element. Na serveru je však situace jiná. Musíš všechny soubory stahovat a pokud stáhneš skript dříve, než HTML, které se ještě musí převést na DOM, skript se prostě neprovede. Dá se tomu zabránit částečně různým cachováním atp., ale to není moc spolehlivé. Nejspolehlivější je použití .onload či umístění všech skriptů na spodek stránky, což doporučuji, protože nikdy nevíš, je skript, který importuješ má tento problém ošetřený. :-)

Nahoru Odpovědět  +1 5.12.2015 14:38
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Jiří Gracík
Libor Šimo (libcosenior):

Takto?

<script type="text/javascript" src="script.js" defer></script>

Nefunguje to.

Editováno 5.12.2015 15:14
Nahoru Odpovědět  +1 5.12.2015 15:11
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Jurajs:
<script src="script.js" type="text/javascript"></script>

Takhle ne?

 
Nahoru Odpovědět 5.12.2015 15:13
Avatar
Odpovídá na Jurajs
Libor Šimo (libcosenior):

Pýtal som sa Jirku Gracíka na umiestnenie atribútu defer.

Nahoru Odpovědět 5.12.2015 15:15
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Jiří Gracík:

Ano, takto. Tak pak to může být tím, že to prohlížeč nepodporuje nebo to funguje jinak, než si pamatuji :D

Nahoru Odpovědět 7.12.2015 0:26
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.