[Anfänger] JavaScript wird nicht ausgeführt beim betätigen des Buttons.

  • Hallo,


    ich bin gerade dabei rauszufinden, warum nach dem betätigen des Buttons nichts passiert.

    Der JS Code befindet sich in einer externen Datei und das Einbinden steht auch im Quellcode dann drin.


    Zum testen habe ich dann den ganzen Code mir geschnappt und direkt in die Default.php reinkopiert.

    Doch auch hier passiert dann beim betätigen des Buttons nicht.


    Um auszuschliessen das der JS Code fehlerhaft ist, habe ich das ganze in eine HTML Datei gepackt und getestet. Funktionierte so wie es soll.

    Das Ganze ist Teil eines eigenen Moduls.


    Jetzt fragt ihr euch sicher, was will ich denn nun genau wissen?

    Nun, wie gehe ich am besten vor um selbst die Lösung zu finden?

    Schubst mich mal bitte in die richtige Richtung. :)


    Dankeschön.

    Ich sehe gerade im Browser die Meldung "Leerer String an getElementById () übergeben." Aus der Datei jquery.js.

  • Ich bekomme die Meldung "TypeError: modbutton is null".

    Als Lösung wird angezeigt:

    "Um den Nullzeiger auf undefined- oder null-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden."

    Dachte wenn ich dann follgendes in meine JS Datei reinschreibe

    Code
    1. if (typeof modbutton !== 'undefined') { // Nun wissen wir, dass modbutton definiert ist, und können weitermachen.
    2. }

    Doch meine Unwissenheit lässt sich leider nicht mit einer 1zu1 Kopie ausgleichen. xD

    Ich bleibe dran und melde mich wieder.

  • Das ist alles etwas theoretisch. Coder sähen halt gerne Code ;-) Wir wissen noch nicht mal, ob du JQuery verwendest oder Vanilla, es5, whatever....


    Zu deinem Button:

    In 99% der fehlerhaften Fälle wird versucht ein DOM-Element anzusprechen (also z.B. ein DIV per id oder class), bevor das element überhaupt geladen ist.


    Wenn du mit JQuery arbeitest, könnte dieser Schnipsel (1. Code im Post) dich auf den richtigen weg bringen. Problem mit Jquery


    document ready meint quasi dilettantisch: Tu was, nachdem das HTML geladen ist. Reicht in den meisten Fällen.

    window load meint quasi dilettantisch: Tu was, nachdem alles geladen ist.


    Es gibt aber auch Pendants im "normalen" JavaScript. Im Unterschied zu JQuery muss man aber evtl. darauf achten, dass ältere Browser nicht unterstütz werden, wenn man keinen Fallback reinbaut.

  • Hallo,


    ich selbst nutze kein JQuery. Aber die Seite für die ich dieses Modul versuche zu machen nutz es.

    Ich hab auch schon was gefunden und ausprobiert, also ein window.onload=function(). Aber da passierte nichts. Ich denke da bin dann ich der Fehler. Was das richtige umsetzen angeht.


    Wobei ich natürlich jetzt lieber dem Template die Schuld gebe. :)

    Achja, jedesmal wenn ich den Button klicke, geht der Zähler der Warnungen bei der jquery.min.js um 2 Zähler hoch.


    Das ist der JS Code, nichts Weltbewegendes.

  • Weil das ganze bisher noch nicht gefruchtet hat und ich nicht den "Mut" verlieren wollte. Habe ich mich nun mit Fields beschäftigt und hätte da mal eine Frage. Oder mehrere Fragen besser gesagt.


    Den Text vom Button ändern per Fields klappte schonmal super.

    Jetzt möchte ich auch gerne die Farbe vom Button ändern per Fields. Hab dafür das Field vom type color genommen.

    Dann wird das ganze in der Controller PHP Datei übernommen. Jetzt meine Frage/n.

    Einfach die Variable in die CSS Datei statt einer direkten Farbangabe zu schreiben geht nicht. Soll ich aus der CSS Datei eine CSS.PHP Datei machen? Und wie binde ich die dann ein?

    JHtml::_('Keine Ahnung', 'mod_meins/mk_css.php', array('version' => 'auto', 'relative' => true));


    Oder ist dies bei Joomla nicht auf diesen Weg möglich, bzw. würde man das anders angehen?

  • Ok, also follgendes funktioniert schonmal.

    JHtml::_('stylesheet', 'mod_meins/mk_css.php', array('version' => 'auto', 'relative' => true));


    Jetzt ist es so das die Variable die ich aus dem Field zu meiner Controllerdatei übergebe, nicht aber in dieser CSS.PHP Datei "ansprechbar" ist.


    Um zu testen ob es überhaupt geht mit einer Variablen in CSS, habe ich einfach in dem PHP Headerbereich der CSS.PHP Datei eine Variable geschrieben. Das klappte auch schonmal.


    Sicher wurde schon bemerkt das ich versuche mich so "durchzuhangeln" ohne wirklich zu wissen was ich tue. :)

  • Hi,
    also ich steige da nicht durch was jetzt Dein Problem ist.
    Du spingst nämlich von einem Problem zum anderen.

    Beschreib doch erst einmal genau was Du machen willst und wie Du das erreichen willst und dann wo es hackt?

    Ja, ich hab das erste Problem erstmal kurz auf Eis gelegt um nicht nur Frust zu bekommen.

    Das was ich jetzt gerade machen will ist. Das ich einen Button von meinem erstellten Modul mit Hilfe von Fields verändern kann. Dabei will ich CSS Eigenschaften Dynamisch machen. Sprich ich nehme eine Variable die sich durch ein Field ergibt und diese wird der Wert von z.B. der Farbe des Buttons.


    Doch wegen meinen mangelden Kenntnissen habe ich es noch nicht geschaft eine Varibale in die externe CSS.PHP Datei zu übernehmen. Doch ich bleib dran. Hat ja immerhin schon das mit dem Text geklappt. :)

  • Ich werde später im Steam Chat wen fragen. der kennt sich eigentlich gut aus. Falls er eine Lösung hat. Werde ich diese am Montag hier posten. Wer weis, vieleicht komme ich ja am WE selber auf die Lösung.

    Hab jetzt einiges durchgelesen. Aber immer wenn es um dynamisches CSS geht, werden die Variablen und deren Werte direkt in der CSS Datei geschrieben. Vielicht bin ich auch total auf dem Holzweg. Und mein Ansatz ist einfach nur falsch.

    Wäre nicht das erste Mal und sicher auch nicht das letzte Mal. ;)


    Jedenfalls wünsche ich ein schönes Wochenende.

  • Ich hab auch schon was gefunden und ausprobiert, also ein window.onload=function(). Aber da passierte nichts.

    Zur Spielerei:

    Code
    1. <style>#mkmeldung{display:none}</style>
    2. <div>
    3. <p id="mkbutton">Show - BLOCK style</p>
    4. <p class="mkclose">Hide - NONE style</p>
    5. <p class="mkclose">INACTIVE</p>
    6. </div>
    7. <div>
    8. <p id="mkmeldung">Ich bin die Meldung. Wenn man mich sieht und nicht die Uhr-Zeit läuft was falsch</p>
    9. </div>


    https://caniuse.com/#feat=domcontentloaded


    https://codepen.io/LukeAskew/pen/LnJsE


  • Hi,

    vielen Dank. Das werde ich mir gleich etwas genauer ansehen.


    Am Wochenende dachte ich mir so, wenn das mit dieser dynamische CSS Datei nicht geht, müsste es ja eigentlich funktionieren wenn ich in der Default Datei beim Button ein style=""; einfüge mit der PHP Variablen.

    PHP
    1. <div id='buttonmitte'>
    2. <button style='background-color: <?php=$mkbuttonfarbebg?>;' id='mkbutton'><?php echo $mkbuttontext; ?></button>
    3. </div>

    Aber das ging gerade auch nicht. So kann die Woche beginnen. Herausfordernd. :)

  • Hallo,


    vorweg: keine Ahnung von & zu diesem JS button Fall usw. Bist ja in Re:Later in besten Code-Händen.

    PHP
    1. <div id='buttonmitte'>
    2. <button style='background-color: <?php=$mkbuttonfarbebg?>;' id='mkbutton'><?php echo $mkbuttontext; ?></button>
    3. </div>

    Du verwendest hier z.B. <div id='xyz'> statt: <div id="xyz">. Schreibs halt nur, weil es mir auffällt. Ob das diesbezüglich relevant ist (ev. Auswirkungen hat), weiß ich nicht.


    Liebe Grüße

    Christine

  • Hallo,


    ich glaube wenn ich "" statt '' nutze, kann es zu Problemen führen. Meine da was gehabt zu haben. Aber Danke dir vielmals. :)

  • Außerdem weiß keiner woher die GET-Variable mkbuttonfarbe eigentlich kommt.

    ????????

    $_GET['mkbuttonfarbe'];

    ????????


    Kann man nat. niemandem verbieten, aber solche Bequemlichkeits-Formulierungen wie

    <?=$mkbuttonfarbe?> und ähnliche

    verwendet man heute eigentlich nicht mehr so gern. Gibt es verschiedene Gründe.

    Man sollte schon immer <?php echo ... ; ?>verwenden. Zumindest dann, wenn eigener Code vielleicht auch mal in anderen Umgebungen laufen soll.

  • Nachtrag. War mein Fehler. Hab die IDs angepasst. jetzt erscheint ein Button mit "Show - BLOCK style" drauf und unten in der Template-Position sind dann noch die beiden anderen als Verlinkung mit Hover-Effekt.