Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript mit PHP Schleife mehrfach einbinden - dynamische id erstellen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript mit PHP Schleife mehrfach einbinden - dynamische id erstellen

    Hallo zusammen,

    das hier wird mein erster Eintrag. Ich hoffe mal das ich alles richtig mache.

    Was ich vorhabe zu Programmieren:
    Eine Webseite auf der Daten bzw. Bilder aus einer Mysql Datenbank angezeigt werden. Diese sollen dann durch ein anklicken ausgewählt und weiter verarbeitet werden. Jedes dieser Datensätze bzw. Bilder wird mit einem Farbigen Hintergrund (Grün) hinterlegt. Durch das anklicken(auswählen) soll der Hintergrund seine Farbe ändern(rot). Nach dem auswählen eines oder mehreren Datensätze sollen die Daten nach einem Bestätigen eines Button weiterverarbeitet werden.

    Beschreibung der Dateien:
    für das anklicken bzw die Hintergrundfarbe ändern habe ich eine Datei geschrieben (fach_button.php) in dieser werden die Daten aus der Datenbank gelesen und ausgegeben und es ist eine JavaScript vorhanden das das ändern der Farbe ermöglicht. Diese Datei bekommt von einer weiteren Datei (fach_auswahl.php) gesagt welche Daten ausgegeben werden sollen.
    In der Datei fach_auswahl werden über zwei schleifen mehrfach die Datei fach_button.php aufgerufen und so die button erstellt.

    wo ich nicht weiterkomme:
    Es ist ja nur möglich jede id nur einmal pro Seite zu verwenden, da ich die Datei fach_button.php mehrfach aufrufe wird so die id mehrfach verwendet und die folge ist das ich nur das erste mal aufgerufene auswählen kann und nicht die weiteren.
    Wie kann ich das problem lösen ? kann ich die id dynamisch erstellen lassen ?

    hier der code aus der Datei fach_button.php
    PHP-Code:
    <!-- Beginn Javascript -->
    <script type="text/javascript">

    //Funktion überprüfen welche Farbe das Feld grad hat
     function farbeSetzten(){
    var farbe1 = "rgb(0, 128, 0)";
    var farbe2 = "rgb(255, 0, 0)";

    //Prüfen ob Objekt die farbe (grün) hat
    if(farbe1 == document.getElementById("Button").style.backgroundColor)
    {
    document.getElementById("Button").style.backgroundColor= (document.getElementById("Button").style.backgroundColor='#200')?farbe2:'#200';

    }

    //Prüfen ob Objekt die farbe (rot) hat also nicht Grün ist
    else if(farbe1 != document.getElementById("Button").style.backgroundColor)
    {
    document.getElementById("Button").style.backgroundColor= (document.getElementById("Button").style.backgroundColor='#200')?farbe1:'#200';

    }

    //ende der Funktion farbeSetzten()
        }

    // ende Javascript
      </script>




    <!--- DIV Kontainer der die Farbe ändert -->
    <div href="javascript:;" id="Button" style="color:snow; background-color:rgb(0, 128, 0);" onclick="farbeSetzten()">


    <!-- Beginn PHP1 -->
    <?php
    //---------------------------------------------------------------------

    // Verbindungsaufbau zum Server

    include"Mysql_verbindung.php";

    //---------------------------------------------------------------------


    //Anzeigen des gefeundenen Datensatzes

       
    $res mysqli_query($link"select * FROM Kleidung" ." where Spalte like '$spalte' and Zeile like '$zeile' ");

    // erzuegen der AUsgabe

       
    $lf 1;
       while (
    $dsatz mysqli_fetch_assoc($res))

       {

          
    //echo "<p id=fach> Kleidungsstück: " . $dsatz["Kleidungsstuck"] . "</p>";
          //echo "<p id=fach> Farbe: " . $dsatz["Farbe"] . "</p>";
          //echo "<p id=fach> Zeile: " . $dsatz["Zeile"] . "</p>";
          //echo "<p id=fach> Spalte: " . $dsatz["Spalte"] . "</p><br>";
        
    echo $dsatz["Foto"] . "<br>";  // Ausgeben des Bildes in dem DIV Rahmen

          
    $lf $lf 1;
       }

    // Ende PHP1
    ?>

    <!-- schliesen des Kontainers -->
    </div>

    <br>

    <!-- Beginn PHP2 -->
    <?php

    //Anzeigen des gefeundenen Datensatzes

       
    $res mysqli_query($link"select * FROM Kleidung" ." where Spalte like '$spalte' and Zeile like '$zeile' ");

    // erzuegen der AUsgabe

       
    $lf 1;
       while (
    $dsatz mysqli_fetch_assoc($res))

       {
     
    // Ausgeben des Kleidungsstückes, der Farbe, der Zeile und der Spalte
          
    echo "<p id=fach> Kleidungsstück: " $dsatz["Kleidungsstuck"] . "</p>";
          echo 
    "<p id=fach> Farbe: " $dsatz["Farbe"] . "</p>";
          echo 
    "<p id=fach> Zeile: " $dsatz["Zeile"] . "</p>";
          echo 
    "<p id=fach> Spalte: " $dsatz["Spalte"] . "</p><br>";
        
    //echo $dsatz["Foto"] . "<br>";

          
    $lf $lf 1;
       }

    // Ende PHP2
    ?>
    hier der code aus der Datei fach_auswahl.php
    PHP-Code:
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css" type="text/css">
    <title>Startseite</title>

    </head>

    <body>

    <div id="container_mitte">

    <!--- Menü datei einbinden -->
    <?php

    include"Menue.php";

    ?>
    <!--- Überschrift -->

    <p id="uberschrift" >Fach auswählen</p>

    <br><br>


    <!-- Beginn PHP1 -->
    <?php

    //Variablen anlegen die Übergeben werden sollen
    //$zeile=1;
    //$spalte=1;

    //fach_button.php datei einbinden
    //include"fach_button.php";

    //ende PHP1
    ?>

    <!---
    + SChleife zum ermitteln der Zeilen und Spalten werte
    + in der Schleife: schauen ob vorhanden jweilie zeilen+ spalten kombination
    wenn vorhanden: unterprogramm fach_button.php aufrufen
    sonst nichts
    --->

    <!-- Beginn PHP2 -->
    <?php
    $zeile
    =1;
    $spalte=1;

    //schleife zum druchlaufen der Spalten - öffnen
    for ($zeile$zeile<=3$zeile++)
    {

    //ausgeben der aktuellen Zeile
    //echo "<br>Zeile: " . $zeile . "<br>";

    //Nullen der Zeilen um neu zu zählen
    $spalte=1;

    //schleife zum druchlaufen der Zeilen - öffnen
    for ($spalte$spalte<=5$spalte++)
    {

    //ausgeben der aktuellen Spalte
    //echo "Spalte: " . $spalte . "   ";

    //Inhalt der beiden schleifen
    //----------------------------

    // Verbindungsaufbau zum Server
    include"Mysql_verbindung.php";


    // Suche in Datenbank nach der jeweiligen Kleidungsstück $art
    $resource mysqli_query($link,"select Kleidungsstuck from Kleidung" ." where Zeile like '$zeile' and Spalte like '$spalte' ");

    //zählen der gefundenen ergebnisse
    $anzahl mysqli_num_rows($resource);


    //Ausgeben der jeweiligen anzahl Hosen, Jacken etc
    //echo "<p id='anzahl'> $anzahl Datensatze </p>";

    //Prüfen ob anzahl gleich 0 -> kein Treffer
    if ($anzahl==0)
    //Bedingung WAHR
    {
    }
    else
    // Bedingung UNWAHR
    {
    //echo "Datensatz vorhanden! <br>";



    //fach_button.php datei einbinden
    include"fach_button.php";



    //if, schließen
    }
    //schleife zum druchlaufen der Zeilen - schließen
    }
    //schleife zum druchlaufen der Spalten - schließen
    }




    //ende PHP1
    ?>

    <br>
    </div>
    </body>
    </html>
    auch wenn der Code nicht perfekt ist, hoffe ich doch das er auch durch die Kommentare nachvollziehbar ist.

    ich hoffe jemand von euch kann mir helfen

    Grüße und dank
    timo

  • #2
    timo91

    Dein Code ist (vorsichtig ausgedrückt) seltsam, die Kommentare verbessern es auch nicht gerade. Beschäftige Dich mal gelegentlich mit dem EVA Prinzip.

    Trotz allem. Ja Du kannst eine ID dynamisch erstellen. 'id = "myButton"'.$variable.'"'....

    Bezüglich der Farben könntest Du auch mal nach classList.toggle suchen.

    Kommentar


    • #3
      Danke für die Rückmeldung kaminbausatz


      Wie nennt sich diese Funktion bzw kannst du mir das erleutern ? ich wollte dazu googlen und lesen hab aber noch nicht sgefunden

      die classlist werdeich mir auch mal anschauen

      Kommentar


      • #4
        Zitat von timo91 Beitrag anzeigen
        Wie nennt sich diese Funktion bzw kannst du mir das erleutern ? ich wollte dazu googlen und lesen hab aber noch nicht sgefunden
        Was meinst Du mit Funktion?

        Kommentar


        • #5
          Zitat von kaminbausatz Beitrag anzeigen

          Was meinst Du mit Funktion?
          Ich glaube er meint wie man hochzählt und die IDs vergibt.

          --------------------

          Kleines Text Beispiel:

          1 - Html mit Class erstellen
          2 - Variable ID erstellen
          3 - Mit Foreach der neu generierten Klasse die ID aus 2 verpassen
          4 - Variable ID mit ++ hochzählen

          Loop bis es durch ist.


          Kommentar


          • #6
            wie nennt sich das: 'id = "myButton"'.$variable.'"'....
            ist mir durchaus bekannt das es keine Funktion im eigentlichen sinne ist.

            vielen Dank für das Textbeispiel - jetzt kann ich dem schon besser folgen. Dann werde ich mich mal daran versuchen...

            Kann in dem HTML das ich mit der Class erstelle auch JavaScript teile enthalten sein ?

            Kommentar


            • #7
              Zitat von timo91 Beitrag anzeigen
              wie nennt sich das: 'id = "myButton"'.$variable.'"'....
              Das ist eine Zuweisung eines Ausdrucks.

              Kommentar


              • #8
                Ich weiß nicht warum du javascript im HTML Code haben möchtest, im Normalfall sprichst du mit Javascript während der Laufzeit den Quellcode an und veränderst ihn ensprechend dynamisch.

                Vorher:

                PHP-Code:
                <div class="tolleklasse">Toller Text</div
                Nachher:

                PHP-Code:
                <div class="tolleklasse" id="tolleid1">Toller Text</div

                Kommentar


                • #9
                  ich möchte ja wärend der Laufzeit ein anklicken/ auswählen ermöglichen. Also das beim anklicken sich der jeweilige Hintergrund ändert

                  Kommentar


                  • #10
                    Zitat von timo91 Beitrag anzeigen
                    ich möchte ja wärend der Laufzeit ein anklicken/ auswählen ermöglichen. Also das beim anklicken sich der jeweilige Hintergrund ändert
                    Hier mal ein grober Ansatz: JavaScript selection.
                    [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                    Kommentar


                    • #11
                      Schreibe JavaScript-Code ausschließlich in JavaScript-Dateien. Und mische JavaScript vor allem nicht mit PHP.

                      Kommentar


                      • #12
                        Ja, genau sowas habe ich gesucht.

                        Nur leider ändert sich bei mir die Farbe nicht wenn ich das in meine Datei Kopiere. Der Mauspfeil wird zur hand aber die Farbe bleibt gleich

                        ich vermute es hat etwas mit SCSS bzw. CSS zutun.
                        Kann ich das SCSS in CSS umschreiben ?

                        Kommentar


                        • #13
                          Kannst mir noch jemand der Interesse halber erläutern was da genau passiert in dem JavaScript teil ?

                          Kommentar


                          • #14
                            Zitat von timo91 Beitrag anzeigen
                            Kannst mir noch jemand der Interesse halber erläutern was da genau passiert in dem JavaScript teil ?
                            Ist alles online dokumentiert & frei verfügbar:

                            https://developer.mozilla.org/de/doc...ntsByClassName
                            https://developer.mozilla.org/de/doc...dEventListener
                            https://developer.mozilla.org/en-US/...ment/classList
                            https://developer.mozilla.org/de/doc...cts/Array/from
                            https://developer.mozilla.org/de/doc...ects/Array/map

                            Wenn du bereits hier am Verständnis scheiterst, dann solltest du einen Gang zurückschalten und dich zunächst mit den JavaScript-Basics befassen.
                            [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                            Kommentar


                            • #15
                              Danke für die Links. Dann werde ich damit mal einarbeiten.

                              Jetzt klappt es auch mit dem click to toggle.

                              Vielen Dank - war eine große hilfe!

                              Kommentar

                              Lädt...
                              X