Infobox

h3llo

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:

Code

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modalheader {
  height: 50px;
  background-color: RGB(0, 0, 130);
}
.modal_inhalt {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
}
.modaltext {
  padding: 20px;
}
.closemodal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 10px;
}
.closemodal:hover, .closemodal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Alles anzeigen

Javascript:

Code

    //"Hinzufügen"-Button
    document.querySelector('#hinzufuegenbutton').onclick = function() {
        if(document.querySelector('.filmelement') !== null) {
            $('#liste').load('listeneueneintraghinzufuegen.php', {
                hinzufuegenButtonGedrueckt: true
            }); 
        }
    }

    //"Entfernen"-Button
    $(document).on('click', '.entfernenbutton', function() { 
        $('#liste').load('elementauslisteentfernen.php', {
            nummerElement: $(this).val()
        }); 
    });

    //Infobox "EAN"
    var eanmodal = document.querySelector("#eanmodal");

    document.querySelector("#eanlink").onclick = function() {
        eanmodal.style.display = "block";
    }

    document.querySelector("#eanmodalschliessen").onclick = function() {
        eanmodal.style.display = "none";
    }

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

Alles anzeigen

Wie bekomme ich Buttons und die Infobox zum Laufen?

basti1012

Kannst du einen vollständigen Testbaren Code posten?

Da fehlt ja einiges.

Dann das durcheinander mit on,onclick,jquery usw.

Wäre einfacher, wenn man bei einem Programmierstiel beibehält

h3llo

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:

PHP

<?php
    session_start();
?>
<div class="top">
    <?php
        include 'header.php';
    ?>
    <div id="main">
        <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>
        <div id="hinweismodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="Hinweismodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">TEXT2</p>
            </div>
        </div>
        <div id="listeloeschenmodal" class="modal">
            <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="listeloeschenmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">Möchten Sie die komplette Liste wirklich löschen?</p>
                <button id="listeloeschenbestaetigenbutton" class="listenbutton" value="Liste l&ouml;schen">Liste löschen</button>
                <button id="listeloeschencancelbutton" class="listenbutton" value="Cancel">Cancel</button>
            </div>
        </div>
        <div id="einundausgabe">
            <?php
                if(isset($_GET['textfeld'])) {
                    //Falls die EAN eine ganzzahlige 13-stellige Zahl ist
                    if (strlen($_GET['textfeld']) == 13 AND is_numeric($_GET['textfeld']) AND !strpos($_GET['textfeld'], '.') AND !strpos($_GET['textfeld'], 'e')) {
                        $_SESSION['ausgabe']= $_GET['textfeld'];
                    }
                }
                //Falls die Sessionvariable 'ausgabe' nicht gesetzt ist oder die Sessionvariable
                //'geradeAusgeloggt' gesetzt ist und der Nutzer ausgeloggt ist
                if((!isset($_SESSION['ausgabe']) OR isset($_SESSION['geradeAusgeloggt'])) AND !isset($_SESSION['nutzerid'])) {
                    ?>
                    <div id="eingabe_container">
                        <div id="ean">
                            <a href="#" id="eanlink">EAN</a>
                        </div>
                    </div>
                    <?php
                }
                //Falls die Sessionvariable 'ausgabe' gesetzt ist
                else {
                    ?>
                    <div id="ausgabe_container">
                        <div id="trennereingabeausgabe" style="height: 30px;">
                        </div>
                        <div id="ausgabe_film">
                            <div id="film_container">
                                <div id="film">
                                    <?php
                                        include 'filmaktualisieren.php';
                                    ?>
                                </div>
                                <br>
                                <div id="hinweis">
                                    <p class="textfilmelement"><a href="#" id="hinweislink">Hinweis</a></p>
                                </div>
                                <div id="filmbutton">
                                    <button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button>
                                </div>
                            </div>
                        </div>
                        <div id="trenner">
                        </div>
                        <div id="ausgabe_liste">
                            <div id="liste">
                                <?php
                                    include 'listeaktualisieren.php';
                                ?>
                            </div>
                            <div id="listenbuttons">
                                <button id="listeloeschenbutton" class="listenbutton" value="Liste l&ouml;schen">Liste löschen</button>
                            </div>
                        </div>
                        <br>
                    </div>
                    <?php
                }
            ?>
        </div>
    </div>
    <?php
        //Falls die Sessionvariable "geradeAusgeloggt" gesetzt ist
        if(isset($_SESSION['geradeAusgeloggt'])) {
            unset($_SESSION['geradeAusgeloggt']);
        }
    ?>
</div>

<script>
    //"Hinzufügen"-Button
    document.querySelector('#hinzufuegenbutton').onclick = function() {
        //Falls ein Film vorhanden ist
        if(document.querySelector('.filmelement') !== null) {
            $('#liste').load('listeneueneintraghinzufuegen.php', {
                hinzufuegenButtonGedrueckt: true
            }); 
        }
    }

    //"Entfernen"-Button
    $(document).on('click', '.entfernenbutton', function() { 
        $('#liste').load('elementauslisteentfernen.php', {
            nummerElement: $(this).val()
        }); 
    });

    //Modal "EAN"
    var eanmodal = document.querySelector("#eanmodal");

    document.querySelector("#eanlink").onclick = function() {
        eanmodal.style.display = "block";
    }

    document.querySelector("#eanmodalschliessen").onclick = function() {
        eanmodal.style.display = "none";
    }

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

    //Modal "Hinweis"
    var hinweismodal = document.querySelector("#hinweismodal");

    document.querySelector("#hinweislink").onclick = function() {
        hinweismodal.style.display = "block";
    }

    document.querySelector("#hinweismodalschliessen").onclick = function() {
        hinweismodal.style.display = "none";
    }

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

    //Modal "Liste löschen"
    var listeloeschenmodal = document.querySelector('#listeloeschenmodal');

    document.querySelector('#listeloeschenbutton').onclick = function() {
        //Falls die Liste Einträge enthält
        if(document.querySelector('.filmelement') !== null) {
            listeloeschenmodal.style.display = 'block';
        }
    }

    listeloeschenmodalschliessen.onclick = function() {
        listeloeschenmodal.style.display = 'none';
    }

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

    //"Liste löschen"-Button
    document.querySelector('#listeloeschenbestaetigenbutton').onclick = function() {
        $('#liste').load('listeloeschen.php', {
            loeschenButtonGedrueckt: true
        });
        listeloeschenmodal.style.display = 'none';
    }

    //"Cancel"-Button
    document.querySelector('#listeloeschencancelbutton').onclick = function() {
        listeloeschenmodal.style.display = 'none';
    }
</script>

Alles anzeigen

header.php:

PHP

<!-- ---CSS Dateiimport--- -->
<style>
    @import url('index.css');
</style>

<!-- ---jQuery Import--- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<?php
    //Falls der LOS-Button gedrückt wurde
    if(isset($_GET['losbutton'])) {
        //EAN-Eingabe in Textfeld speichern
        $ean = trim($_GET['textfeld'], ' ');
        //Falls die EAN eine ganzzahlige 13-stellige Zahl ist
        if (strlen($ean) == 13 AND is_numeric($ean) AND !strpos($ean, '.') AND !strpos($ean, 'e')) {
            ?>
            <div id="eanhinweis13stelligmodal" class="modal">
            <?php
        }
        //Falls die EAN nicht 13-stellig ist und/oder keine ganzzahlige Zahl
        else {
            ?>
            <div id="eanhinweis13stelligmodal" class="modal" style="display: block;">
            <?php
        }
        ?>
                <div class="modal_inhalt">
                <div class="modalheader">
                    <span id="eanhinweis13stelligmodalschliessen" class="closemodal">&times;</span>
                </div>
                <p class="modaltext">Die EAN muss eine 13-stellige Zahl sein.</p>
            </div>
        </div>
        <?php
    }
?>
<div id="kopfzeile">
    <div id="eingabe">
        <form id="eanformular" method="GET" action="index.php">
            <input type="text" name="textfeld" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
            <button id="losbutton" name="losbutton" class="eaneingabeelement eaneingabebutton" type="submit">Los</button>
        </form>        
    </div>
</div>

<script>
    var eanhinweis13stelligmodal = document.querySelector('#eanhinweis13stelligmodal');

    document.querySelector('#eanhinweis13stelligmodalschliessen').onclick = function() {
        eanhinweis13stelligmodal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == eanhinweis13stelligmodal) {
            eanhinweis13stelligmodal.style.display = 'none';
        }
    }
</script>

Alles anzeigen

Weiteres folgt im 2. Post...

h3llo

filmaktualisieren.php:

PHP

<?php
    //Falls der Button gedrückt wurde
    if(isset($_GET['losbutton'])) {
        //EAN-Eingabe in Textfeld speichern
        $ean = trim($_GET['textfeld'], ' ');
        //Falls die EAN 13-stellig ist und eine ganzzahlige Zahl
        if (strlen($ean) == 13 AND is_numeric($ean) AND !strpos($ean, '.') AND !strpos($ean, 'e')) {
            //Hier werden eigentlich die Filmdaten ermittelt. Der Einfachheit halber sehen diese
            //hier nur wie folgt aus:
            //EAN
            $_SESSION['ean'] = 'A';
            //Titel
            $_SESSION['titel'] = 'B';
            //Disctyp
            $_SESSION['disctyp'] = 'C';
            //Besonderheiten
            $_SESSION['besonderheit'] = 'D';
        }
    }
    //Falls kein Film gespeichert ist
    if(!isset($_SESSION['ean'])) {
        echo '
        <div id="leererfilm_container">
            <p id="leererfilmtext">Geben Sie eine EAN ein und klicken Sie auf "Los".</p>
        </div>
        ';
    }
    //Falls ein Film gespeichert ist
    else {
        //Daten ausgeben
        echo '<div class="filmelement">';
        echo '
            <p class="textfilmelement">'.$_SESSION['titel'].' ('.$_SESSION['ean'].')</p>
            <p class="textfilmelement">'.$_SESSION['disctyp'];
        //Falls die Besonderheiten nicht leer sind
        if($_SESSION['besonderheit'] != '') {
            echo ', '.$_SESSION['besonderheit'];
        }
        echo '</p>';
        echo '
        </div>
        ';
    }
?>

Alles anzeigen

listeaktualisieren.php:

PHP

<?php 
    echo '<div id="filmliste">';
    if (isset($_SESSION['filme'])) {
        //Falls die Liste leer ist
        if(count($_SESSION['filme']) == 0) {
            echo '
                <div id="leereliste_container">
                    <p id="leerelistetext">Ihre Liste ist leer.</p>
                </div>
            ';
        }
        //Falls die Liste nicht leer ist
        else {
            //Gehe alle Einträge im Array filme durch
            For ($i = 0; $i <= count($_SESSION['filme']) - 1; $i++) {
                //Daten ausgeben
                echo '
                    <div class="listenelement">
                        <div class ="datenfilmelement">
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][1].' ('.$_SESSION["filme"][$i][0].')</p>
                            <p class="textfilmelement">'.$_SESSION["filme"][$i][2];
                //Falls die Besonderheiten nicht leer sind
                if($_SESSION['filme'][$i][3] != '') {
                    echo ', '.$_SESSION['filme'][$i][3];
                }
                echo '      </p>
                        </div>
                        <div class ="entfernenbuttonfilmelement">
                            <p class="textfilmelement"><button id="entfernenbutton" type="button" class="entfernenbutton" value="'.$i.'">Entfernen</button>&nbsp; &nbsp; &nbsp;</p>
                        </div>
                    </div>
                ';
            }
        }
    }
    //Falls der Session Array filme nicht existiert
    else {
        echo '
            <div id="leereliste_container">
                <p id="leerelistetext">Ihre Verkaufsliste ist leer.</p>
            </div>
        ';
    }
    echo '</div>';
?>

Alles anzeigen

listeneueneintraghinzufuegen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['hinzufuegenButtonGedrueckt'])) {
        //Falls die Session Variable ean gesetzt ist
        if (isset($_SESSION['ean'])) {
            //Daten in Listenarray eintragen
            $_SESSION['filme'][] = array($_SESSION['ean'], $_SESSION['titel'], $_SESSION['disctyp'], $_SESSION['besonderheit']);
        }
        //Liste aktualisieren
        include 'listeaktualisieren.php';  
    }
?>

Alles anzeigen

elementauslisteentfernen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['nummerElement'])) {
        //Falls der Session Array filme existiert
        if(isset($_SESSION['filme'])) {
            //Entsprechendes Element aus Array entfernen
            array_splice($_SESSION['filme'], $_POST['nummerElement'], 1);
            //Liste aktualisieren
            include 'listeaktualisieren.php';
        }
    }
?>

Alles anzeigen

listeloeschen.php:

PHP

<?php
    //Session starten
    session_start();
    //Falls der Button gedrückt wurde
    if (isset($_POST['loeschenButtonGedrueckt'])) {
        //Falls der Session Array filme existiert
        if(isset($_SESSION['filme'])) {
            $_SESSION['filme'] = array();
            //Liste aktualisieren
            include 'listeaktualisieren.php'; 
        }
    }
?>

Alles anzeigen

index.css:

Code

/* --> Modal <-- */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modalheader {
  height: 50px;
  background-color: RGB(0, 0, 130);
}
.modal_inhalt {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
}
.modaltext {
  padding: 20px;
}
.closemodal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 10px;
}
.closemodal:hover, .closemodal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Alles anzeigen

basti1012

Das war doch das Projekt richtig.

Suchfeld im Header

Ich kopiere mir das mal zusammen und mal schauen was passiert.

tk1234

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:

Zitat von h3llo

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.

basti1012

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

basti1012

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

tk1234

Zitat von basti1012

Inline-style versuchen zu vemeiden

richtig. Klassennamen nach der damit gesetzten Eigenschaft zu benennen ist auch nicht wirklich besser … Die Klassen sollten immer nach dem Einsatzzweck benannt werden, nie nach der Darstellung - die kann sich auch ändern.

Sempervivum

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

Unklar, ob er es umgesetzt hat.

h3llo

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!

Sempervivum

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() {

Sempervivum

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

Code

        window.onclick = function (event) {
            switch (event.target) {
                case eanmodal:
                    eanmodal.style.display = "none";
                    break;
                case hinweismodal:
                    hinweismodal.style.display = "none";
                    break;
                case listeloeschenmodal:
                    listeloeschenmodal.style.display = 'none';
                    break;
            }
        }

Alles anzeigen

h3llo

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!

Sempervivum

Zitat

Ansonsten funktioniert der Code nun soweit!

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

Sempervivum

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:

Code

        window.addEventListener('click', function (event) {
            // In event.target steht das geklickte Element zur Verfügung
            switch (event.target) {
                case eanmodal:
                    eanmodal.style.display = "none";
                    break;
                case hinweismodal:
                    hinweismodal.style.display = "none";
                    break;
                case listeloeschenmodal:
                    listeloeschenmodal.style.display = 'none';
                    break;
            }
            // Wir prüfen ob der Entfernen-Button geklickt wurde:
            if (event.target.classList.contains('entfernenbutton')) {
                $('#liste').load('elementauslisteentfernen.php', {
                    nummerElement: event.target.value
                });
            }    
        });

Alles anzeigen

(ungetestet)

h3llo

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!