Avatar billede htx98i17 Professor
02. september 2017 - 18:07 Der er 6 kommentarer og
2 løsninger

hvad var fidusen lige ved addEventListener() ?

Jeg troede fidusen var at man kunne ligge addEventListener i <head>...

Så kan jeg bedre forstå hvorfor det ikke fungerer for mig...


<!DOCTYPE html>
<html>
<body>

<p>This example uses the addEventListener() method to attach a click event to the document.</p>

<p>Click anywhere in the document.</p>

<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>

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

<script>
document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World!";
});
</script>

</body>
</html>
Avatar billede S. Enevoldsen Juniormester
03. september 2017 - 00:18 #1
Ved mig virker det både med scriptet i <head> og i <body>. Kan du uddybe hvad problemet er?
Avatar billede htx98i17 Professor
03. september 2017 - 06:45 #2
Her er et eksempel på hvordan jeg troede det fungerede:


<!DOCTYPE html>
<html>
    <head>
        <script>
        document.getElementById("noget").addEventListener("click", function(){
            document.getElementById("demo").innerHTML = "Hello World!";
        });
        </script>
    </head>
<body>

<p>This example uses the addEventListener() method to attach a click event to the document.</p>

<p id="noget" >Click this paragraph in the document to change content.</p>

<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>

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



</body>
</html>
Avatar billede olsensweb.dk Ekspert
03. september 2017 - 09:24 #3
#2
på det tidspunkt du afvikler dit js er documentet ikke færdig indlæst, og html ikke på plads. (DOM træet er ikke opbygget)
i jquery pakker du det normalt ind i en $('document').ready(function(){});, så du skal lave noget tilsvarende uden om jquery lib


kig på DOMContentLoaded eller readystatechange

https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
http://www.jstips.co/en/javascript/detect-document-ready-in-pure-js/
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState


alternativet er at du ligger dit js ned i bunden af siden, dvs lige før </body>
Avatar billede htx98i17 Professor
03. september 2017 - 09:37 #4
#3 jep, men jeg troede netop fidusen ved en listener var at man kom uden om at HTML'en skulle være indlæst først. Altså at den afventede resten af html'en...

Så hvad er fidusen/formålet så ved at bruge en listener?
Den er vel ikke 'bare' at man så ikke behøves at skrive "onEvent=".blabla.." i det repspektive tag?
Avatar billede olsensweb.dk Ekspert
03. september 2017 - 09:57 #5
[quote]
Den er vel ikke 'bare' at man så ikke behøves at skrive "onEvent=".blabla.." i det repspektive tag?
[/quote]
Jo !!, det korte svar må være at gøre din HTML renere, så du har html for sig, js for sig, og CSS for sig.
i gamle dage pladrede du det hele sammen, og lavede du et onclick / onchange ... på html elementet, som du selv skriver, og det er dette man har lavet om til en addEventListener.

js må først indlæsses når elementet den lytter til / gør noget på er indlæst, derfor ligges de oftest i bunden når siden (DOM) er indlæst.
Avatar billede Slater Ekspert
03. september 2017 - 10:58 #6
men jeg troede netop fidusen ved en listener var at man kom uden om at HTML'en skulle være indlæst først. Altså at den afventede resten af html'en...


Det er det sådan set også, men læg mærke til hvad du selv skriver:
document.getElementById("noget").addEventListener( ...

Dvs. først henter du det element du vil sætte en listener på, og så sætter du listeneren. Listeneren er altså god nok, den venter til der sker noget - men du forsøger først at hente et element, der endnu ikke findes, for at sætte listeneren på den.

I <head> er det eneste element der er indlæst <html> - ikke engang <body> - så du kan altså kun sætte listeners på window.
Avatar billede htx98i17 Professor
03. september 2017 - 11:01 #7
Hvad er så praksis at gøre, hvis man har brug for at tage nogle værdier med genereret  fra PHP et eller andet sted på siden? eksempelvis hvis man har lavet et udtræk fra database og har en løkke som udskriver resultatet et sted i dokumentet. Noget af det data skal måske bruges i en funktion i javascriptet.
Avatar billede Slater Ekspert
03. september 2017 - 11:03 #8
Hvis du skal bruge det i Javascript, så udskriv det som JSON i Javascript.

F.eks. bare

<script>
var data = <?php echo json_encode($data); ?>;
</script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester