• Hallo,


    ich habe eine Seite mit mehreren Buttons. Außerdem soll eine Infobox angezeigt werden, wenn auf einen bestimmten Link geklickt wird. Sowohl für die Buttons als auch für die Infobox habe ich ein Javascript, das am Ende der Seite eingebunden ist. Leider funktionieren nur die Buttons oder die Infobox, je nachdem, welcher Javascript-Code zuerst steht. Hier der Code:


    Buttons:


    Code
    <button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button>
    Code
    <button id="entfernenbutton" type="button" class="entfernenbutton" value="'.$i.'">Entfernen</button>


    Link:


    Code
    <a href="#" id="eanlink">EAN</a>


    Infobox:


    Code
            <div id="eanmodal" class="modal">
                <div class="modal_inhalt">
                    <div class="modalheader">
                        <span id="eanmodalschliessen" class="closemodal">&times;</span>
                    </div>
                    <p class="modaltext">Text</p>
                </div>
            </div>


    Infobox CSS:



    Javascript:



    Wie bekomme ich Buttons und die Infobox zum Laufen?

  • Zitat

    Kannst du einen vollständigen Testbaren Code posten?


    Hier folgt der Code. Ich habe einiges, was nicht relevant ist, raus gekürzt. Daher sieht der Code an einigen Stellen etwas zusammengewürfelt aus. Die Kommentare habe ich im Wesentlichen drin stehen lassen, damit es etwas übersichtlicher wird:


    index.php:



    header.php:



    Weiteres folgt im 2. Post...

  • filmaktualisieren.php:



    listeaktualisieren.php:



    listeneueneintraghinzufuegen.php:



    elementauslisteentfernen.php:



    listeloeschen.php:



    index.css:


  • Die Codefetzen schau ich mir jetzt nicht genauer an (v.a. bastel ich mir nicht alles so zusammen dass ich es testen kann - das wäre deine Aufgabe das zu ermöglichen ohne x Dateien händisch anlegen zu müssen), eines ist mir aber aufgefallen:

    if (strlen($ean) == 13 AND is_numeric($ean) AND !strpos($ean, '.') AND !strpos($ean, 'e')) {

    du suchst die Funktion ctype_digit() (statt is_numeric()), damit kannst du die beiden strpos() rauswerfen.


    Außerdem: gewöhn dir an das ?> wegzulassen wenn anschließend kein HTML kommt - dann riskierst du nicht dass dir irgendwelche Leerzeichen vielleicht mal in die Suppe spucken.

  • Mal kurz geschaut und einige nicht so schöne sachen gefunden.

    Meine Meinung

    Code
    id="eanhinweis13stelligmodalschliessen"

    Ist elaubt , kann man aber so sehr schlecht lesen.Bitte kürzere id wählen , oder so machen

    Code
    id="ean_hinweis_13_stellig_modal_schliessen"


    Inline-style versuchen zu vemeiden

    Code
    <div id="eanhinweis13stelligmodal" class="modal" style="display: block;">
    besser mit klassen
    <style>
    .d_block{
    display: block;
    }
    </style>
    <div id="eanhinweis13stelligmodal" class="modal d_block">

    Du hast hier

    Code
    <div id="eanhinweis13stelligmodal" class="modal" style="display: block;">
    und hier
    var eanhinweis13stelligmodal = document.querySelector('#eanhinweis13stelligmodal');

    eine ID , die auch als Variable benutzt wird.

    Das geht fast immer schief.

    Nutze da irgendwelchen anderen Namen, nur nie die gleichen, auch Funktionen sollten nicht unbedingt wie eine ID oder Variable heißen.

    Da hatten schon mehrere mit Probleme.


    De Code

    Code
    document.querySelector('#hinzufuegenbutton').onclick = function() {
    ,,,,

    Erzeugt ein Error, wenn kein Button erzeugt wurde.

    Mach es anders. Lass dir ein Template einfallen, wo die Buttons beim Seitenladen alle im Element, stehen ( display:none).

    Oder

    Erzeuge das Javascript nur, wenn es den Button auch gibt.

    Das hast du bei anderen Elementen auch so.


    Dann würde in noch onclick in addEventListener ändern.


    Dass du so viele einzelne Datei nutzt , verstehe ich nicht ganz. Ich finde es zu viel.

    Die PHP Profis können da bestimmt mehr zu sagen, ob das überhaupt sinnvoll ist zu viele Einzel Dateien einzubinden.



    Das war es erstmal,

    das dürfte dann schon reichen -

    Bitte den Hinweis von tk1234 auch beachten

  • Noch was.

    Dein JS Code ist auch zu lang und zu umständlich.

    ZB

    Du hast hier im html

    Code
    <span id="eanmodalschliessen" class="closemodal">&times;</span>
    <span id="Hinweismodalschliessen" class="closemodal">&times;</span>
    <span id="listeloeschenmodalschliessen" class="closemodal">&times;</span>

    Für jede ID hast du einen eigenen Modal schließen Code.

    Das geht auch über die Klasse und spart nee Menge Code

  • Zitat

    Das war doch das Projekt richtig.


    Ja, genau.


    Danke erstmal für die vielen Hinweise. Werde mich dran setzen und den Code entsprechend ändern.


    Zitat

    Was die Vielzahl an PHP-Dateien betrifft, so hatte ich h3llo hier schon einen Hinweis gegeben, wie man es entscheidend vereinfachen kann:

    Klick-Event mehrmals ausgeführt


    Deine Änderungshinweise habe ich auch umgesetzt. eaneingabe.php, film.php, liste.php und filmerstellen.php sind raus geflogen und der Code aus diesen wurde direkt in index.php geschrieben. Außerdem habe ich mir auf deinen Hinweis hin meine anderen Dateien nochmal vorgenommen und auch da einiges raus geschmissen. Also kein Grund zum Ärger! ;)

  • Zitat

    Deine Änderungshinweise habe ich auch umgesetzt. eaneingabe.php, film.php, liste.php und filmerstellen.php sind raus geflogen und der Code aus diesen wurde direkt in index.php geschrieben. Außerdem habe ich mir auf deinen Hinweis hin meine anderen Dateien nochmal vorgenommen und auch da einiges raus geschmissen.

    Das liest sich ja sehr gut, dann müsste das im Vergleich zum Anfang wesentlich überschaubarer sein.


    Ich habe mir dein ursprüngliches Problem mal angesehen und mir ist folgendes aufgefallen: In dem Code deiner index.php finden ich mehrmals dieses:

    window.onclick = function(event) {

    Dabei wird das onclick jeweils überschrieben, so dass nur das letzte wirksam bleibt. Prüfe, ob das die Ursache für dein Problem ist. Wenn ja, dann konsequent mit Eventbubbling arbeiten, so wie hier:

    $(document).on('click', '.entfernenbutton', function() {

  • PS: Das geht auch ohne jQuery, man kann das unter einem window.onclick zusammen fassen:

  • Ich habe nun soweit alle eure Hinweise umgesetzt, außer:


    Zitat

    Für jede ID hast du einen eigenen Modal schließen Code.

    Das geht auch über die Klasse und spart nee Menge Code


    Da weiß ich nicht genau, wie das geht.


    Und

    Zitat

    Dann würde in noch onclick in addEventListener ändern.


    habe ich beim Entfernen-Button nicht umgesetzt. Da weiß ich nicht, wie ich addEventListener zusammen mit Event-Bubbling anwende.


    Ansonsten funktioniert der Code nun soweit!

  • Zitat

    "Dann würde in noch onclick in addEventListener ändern."

    habe ich beim Entfernen-Button nicht umgesetzt. Da weiß ich nicht, wie ich addEventListener zusammen mit Event-Bubbling anwende.

    Das wäre relativ einfach:

    (ungetestet)

  • Zitat
    Was war denn jetzt der Knackpunkt? Zuerst hattest Du ja geschrieben, dass es noch nicht funktioniert.


    Da ich alles gleichzeitig umgesetzt habe, kann ich es nicht genau sagen. Aber sehr wahrscheinlich war es das Javascript, das einen Error erzeugt, wenn der Button nicht existiert. (Den Code habe ich in ein If-Statement gesetzt, das zunächst geprüft, ob der Button existiert.)


    Code
                if (event.target.classList.contains('entfernenbutton')) {
                    $('#liste').load('elementauslisteentfernen.php', {
                        nummerElement: event.target.value
                    });
                }

    Der Code funktioniert leider nicht. Der Button zeigt keine Reaktion.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!