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

Neewmla · 11. Oktober 2018

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.

Neewmla · 11. Oktober 2018

Bevor jetzt wer antwortet. wartet noch etwas. Ich glaube ich bin da was auf der Spur.

Melde mich wieder, wenn ich nicht weiter komme.

Neewmla · 11. Oktober 2018

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

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

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

Ich bleibe dran und melde mich wieder.

Neewmla · 11. Oktober 2018

Es scheint so das jquery.min.js ein Problem m allgemeinen hat und das nichts mit meinem JS Code zu tun hat. Habe eben mein Modul gelöscht und die Meldung kam trotzdem.

Also war dies eine kalte Spur. Ich schau mal weiter.

Re:Later · 11. Oktober 2018

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.

Neewmla · 11. Oktober 2018

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.

Code

var mkmodal = document.getElementById('mkmeldung');
var mkbutton = document.getElementById('mkbutton');
var span = document.getElementsByClassName('mkclose')[0];

mkbutton.onclick = function() {
                    mkmodal.style.display = 'block';
                    }

span.onclick = function() {
                    mkmodal.style.display = 'none';
                    }

window.onclick = function(event) {
                    if (event.target == mkmodal) {
                               mkmodal.style.display = 'none';
                               }
                    }

Alles anzeigen

Das ist der JS Code, nichts Weltbewegendes.

Neewmla · 12. Oktober 2018

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?

Neewmla · 12. Oktober 2018

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.

Neewmla · 12. Oktober 2018

Habe nun ohne Erfolg dies gemacht:

PHP

<?php
header('Content-type: text/css');
$mkbuttonfarbe=$_GET['mkbuttonfarbe'];
?>
button{
background-color: <?=$mkbuttonfarbe?>;
}

Bin ich auf dem richtigen Weg?

DirtyWorld · 12. Oktober 2018

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?

Neewmla · 12. Oktober 2018

Zitat von DirtyWorld

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.

Neewmla · 12. Oktober 2018

Dachte mir ich versuche es grafisch zu veranschaulichen.

https://img.picload.org/image/dcdrlldl/cssphp.png

Es ist zwar möglich eine Variable in der CSS.PHP Datei direkt zu erstellen. Aber es soll halt eine übernommen werden.

Wäre da eher Session die Lösung?

Neewmla · 12. Oktober 2018

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.

Re:Later · 14. Oktober 2018

Zitat von Neewmla

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

Zur Spielerei:

Code

<style>#mkmeldung{display:none}</style>

<div>
<p id="mkbutton">Show - BLOCK style</p>
<p class="mkclose">Hide - NONE style</p>
<p class="mkclose">INACTIVE</p>
</div>
<div>
<p id="mkmeldung">Ich bin die Meldung. Wenn man mich sieht und nicht die Uhr-Zeit läuft was falsch</p>
</div>

Code

;(function() {

    // Geschmackssache
    'use strict';

    document.addEventListener('DOMContentLoaded', function()
    {
        
        var span;
        var mkmodal = document.getElementById('mkmeldung');
        var mkbutton = document.getElementById('mkbutton');
        var spans = document.getElementsByClassName('mkclose');
        
        if (spans.length)
        {
            var span = spans[0];
        }

        if (mkmodal && mkbutton)
        {
            mkbutton.addEventListener('click', function()
            {
                mkmodal.style.display = 'block';
                mkmodal.innerHTML = 'Show geklickt um ' + new Date().toLocaleTimeString();
            });
        }

        if (mkmodal && span)
        {
            span.addEventListener('click', function()
            {
                mkmodal.style.display = 'none';
            });
        }

    });
})();

Alles anzeigen

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

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

Neewmla · 15. Oktober 2018

Zitat von Re:Later

Zur Spielerei:

Code

<style>#mkmeldung{display:none}</style>

<div>
<p id="mkbutton">Show - BLOCK style</p>
<p class="mkclose">Hide - NONE style</p>
<p class="mkclose">INACTIVE</p>
</div>
<div>
<p id="mkmeldung">Ich bin die Meldung. Wenn man mich sieht und nicht die Uhr-Zeit läuft was falsch</p>
</div>

Code

;(function() {

    // Geschmackssache
    'use strict';

    document.addEventListener('DOMContentLoaded', function()
    {
        
        var span;
        var mkmodal = document.getElementById('mkmeldung');
        var mkbutton = document.getElementById('mkbutton');
        var spans = document.getElementsByClassName('mkclose');
        
        if (spans.length)
        {
            var span = spans[0];
        }

        if (mkmodal && mkbutton)
        {
            mkbutton.addEventListener('click', function()
            {
                mkmodal.style.display = 'block';
                mkmodal.innerHTML = 'Show geklickt um ' + new Date().toLocaleTimeString();
            });
        }

        if (mkmodal && span)
        {
            span.addEventListener('click', function()
            {
                mkmodal.style.display = 'none';
            });
        }

    });
})();

Alles anzeigen

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

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

Alles anzeigen

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

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

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

christine2 · 15. Oktober 2018

Hallo,

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

Zitat von Neewmla

PHP

<div id='buttonmitte'>
    <button style='background-color: <?php=$mkbuttonfarbebg?>;' id='mkbutton'><?php echo $mkbuttontext; ?></button>
</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

Neewmla · 15. Oktober 2018

So hab die beiden Codes nun eingefügt um zu sehen was passiert und es erscheint da nun der Text

"

Show - BLOCK style

Hide - NONE style

INACTIVE

/*

*/
"

Neewmla · 15. Oktober 2018

Zitat von christine2

Hallo,

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

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

Alles anzeigen

Hallo,

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

Re:Later · 15. Oktober 2018

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.

Neewmla · 15. Oktober 2018

Zitat von Neewmla

So hab die beiden Codes nun eingefügt um zu sehen was passiert und es erscheint da nun der Text

"

Show - BLOCK style

Hide - NONE style

INACTIVE

/*

*/
"

Alles anzeigen

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.