Einbinden von JavaScript - wo und wie?

  • Hallo,

    ich will mein Problem an einem kleinen Beispiel aufzeigen. In einem Beitrag oder einem Eigenene Modul kann ich direkt ein Javascript triggern. Dort stehen z.B. folgende Zeilen

    <p id="testhallo" onclick="testFunction()">hallo</p>

    <script src='templates/cassiopeia/js/testScript.js'></script>

    In der Datei testScript.js gibt es dann die antsprechende Funktion:

    function testFunction() {

    alert ('Hello World!');

    }

    Funktioniert so und kann überall dort angewendet werden, wo HTML eingegeben werden kann. Das aber ist genau der Punkt: das geht nicht bei z.B. sehr vielen Modulen und bei Menüs. Hier ist z.B. folgende Lösung direkt über die testScript.js denkbar(?):

    document.getElementByID('testhallo').addEventListener('click', testFunction);

    function testFunction() {

    alert ('Hello World!');

    }

    Dazu soll gemäß meinen Informationen (z.B. aus den entsprechenden Joomla-Dokus) als eine der möglichen Lösungen in der index.php vor </head> die folgende Zeile eingetragen werden.

    <script src='templates/cassiopeia/js/testScript.js'></script>

    Funktioniert aber nicht (auch nicht mittels einer entsprechenden Extention > Add Custom Javascript).

    Habe ich was übersehen oder ist was falsch? Ich muss dazu sagen, dass meine Kenntnisse von JavaSript tendenziell gegen 0 gehen und ich eigentlich keine umfangreiche Programmierung anstrebe. Die wenigen Punkte, wo ich Javascript brauche, sollten daher auf einfache Weise realisierbar sein.

    Gruß

    Heinz

    "Wer es nicht versucht schafft es auch nicht."

  • Siehe auch in den Anleitungen z.B.:

    Sieger66
    22. Januar 2021 um 19:55
  • Hallo,

    den Hinweis hatte ich nicht gefunden, hat mich aber ein ganzes Stück weiter gebracht. Dafür erst einmal vielen Dank.

    Konnte nämlich feststellen, dass eine Integration von JavaScripts bereits im Standard enthalten ist, ebenso wie die Integration von CSS (siehe Images). Wichtig ist dabei, dass die Datei wie bei CSS den Namen user trägt. Hätte ich eigentlich selbst drauf kommen können ( pardon - ein entsprechender Hinweis, den es ja auch zu CSS gibt, wäre trotzdem hilfreich)

    Ergebnis ist, dass im ersten Beispiel auf die Referenz zur js-Datei verzichtet werden kann. Es bleibt nur die Zeile

    <p id="testhallo" onclick="testFunction()">hallo</p>

    Und dass das zweite Beispiel dennoch nicht funktioniert führe ich mal auf meine unzureichenden Kenntnisse zurück.

  • Jetzt funktioniert es. Die Lösung ist folgende:

    in der index.php muss in <body> ganz am Schluss noch folgendes Statement eingefügt werden:

    <script src='templates/cassiopeia/js/user.js'></script>

    </body>

    Ich hatte das so schon mal probiert, aber eben nicht dem Dateinamen user. Es wird also offenbar beides benötigt: der Eintrag unter <head> (siehe meinen Beitrag zuvor) und eben dieser Eintrag am Ende von <body> - beides unter der Voraussetzung, dass die Datei den Namen user trägt. Weshalb das so ist und ob es so beabsichtigt ist, kann ich nicht beurteilen. Das überlasse ich den Experten.

    Den entscheidenden Hinweis habe ich übrigens in diesem blog gefunden:

    https://bobbyhadz.com/blog/javascrip…ntlistener-null

    Kurz zusammengefasst: der Eventlistener kann ein Objekt nur finden, nachdem all HTML-Objekte erzeugt worden sind. Wird also das obige Statement zu früh in der Index.php eingetragen wird, gibt es kein Ergebnis.

    Aus meiner (laienhaften?) Sicht wäre es sinnvoll, wenn das so oder in anderer geeigneter Weise standardmäßig implementiert wäre.

    Gruß

    Heinz

    "Wer es nicht versucht schafft es auch nicht."

  • Wenn eine user.js Datei da ist, fügt es Cassiopeia automatisch ein. Du musst dein Javascript so schreiben, dass es erst auf dem Aufbau des DOMs wartet, bis es ausgeführt wird. Ich bin leider auch nicht so fit in Javascript um mehr Erklärungen abgeben zu können, aber ich habe meine Funktionen in so was eingeschlossen:

    Code
    document.addEventListener("DOMContentLoaded", function(){
    meine Funktionen
    ....
    });
  • Hallo Viviana,

    damit hast Du meine nächste Frage beantwortet. Ich hatte nämlich gestern doch noch ein paar Probleme und dachte mir schon, dass ein Nachladen erforderlich ist. Ich probiere das im Laufe des Nachmittags aus und gebe Feedback.

    Danke erst einmal.

    Gruß

    Heinz

    "Wer es nicht versucht schafft es auch nicht."

  • Hallo,

    Wenn eine user.js Datei da ist, fügt es Cassiopeia automatisch ein. Du musst dein Javascript so schreiben, dass es erst auf dem Aufbau des DOMs wartet, bis es ausgeführt wird. Ich bin leider auch nicht so fit in Javascript um mehr Erklärungen abgeben zu können, aber ich habe meine Funktionen in so was eingeschlossen:

    Code
    document.addEventListener("DOMContentLoaded", function(){
    meine Funktionen
    ....
    });

    Genau das war die Lösung. Daher nochmals vielen Dank für diesen Hinweis. Damit ist u.a. auch kein Eintrag in der index.php nötig.

    Auch dafür Dank - kommt in meine Infosammlung..

    Gruß

    Heinz

    "Wer es nicht versucht schafft es auch nicht."

  • Hallo!

    Ich habe das einfache Beispiel hier mal getestet und das onClick Event wird bei mir nicht ausgeführt. Die user.js wird implementiert, den Eventhandler sehe ich im DOM auch, aber der alert wird nicht in einem normalen "Beitrags" Artikel in Joomla nicht gefeuert... mache ich was falsch oder habe ich etwas nicht verstanden? Das ist mein ersten Test, Custom JavaScript Code in Joomla Beiträge zu verwenden.

    Gruß

    Frank