Uncaught TypeError: Cannot read properties of null (reading 'classList')

**scatello** · 02.11.2023, 15:41

Zitat von ozgur98 Beitrag anzeigen

Meine Vermutung ist, dass irgendwie wegen der Schleife das Feld 'losDialog' nicht erkannt wird

Daran wird es wohl liegen, denn wenn du das in einer Schleife erzeugst, haben alle div's die gleiche ID und das darf nicht sein, ID's müssen eindeutig sein.

**ozgur98** · 02.11.2023, 15:58

wie kann ich das umgehen also so dass in der Schleife dann jede div eine eindeutige ID erhält. Bei dem Button ist das ja dann auch der Fall oder?
Hab das div Element ausserhalb der Schleife eingefügt, erhalte nun folgende Fehlermeldung:
Uncaught TypeError: Cannot read properties of null (reading 'classList')

**scatello** · 02.11.2023, 16:50

Hänge an die ID's einfach eine laufende Nummer, sollte in einer Schleife ja kein Problem sein.

**ozgur98** · 06.11.2023, 16:08

habe bei den IDs eine laufende Nummer hinterlegt aber erhalte dennoch die Fehlermeldung: Uncaught ReferenceError: losDialog1 is not defined wenn ich zum testen die variable aufruf..

**scatello** · 06.11.2023, 19:49

Zeige mal das aktuelle Script. Aber bitte die Formatierungsmöglichkeiten des Forums dabei nutzen (php-Button).

**ozgur98** · 06.11.2023, 19:56

Danke dir

PHP-Code:


<?php
  session_start();
  if($_SESSION["login"]!=111)
  {
    //Sofort Logout!!
    header("Location: artikel.php");
  }
?>

<!DOCTYPE html>
<html>
    <head>





        <meta charset="utf-8">
        <title>Willkommen auf Ö-Shop</title>
        <!-- Bootstrap -->
        <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Fontawesome -->
        <link href="../node_modules/@fortawesome/fontawesome-free/css/all.css" rel="stylesheet">
       <!-- JQUERY -->
        <script src="../node_modules/jquery/jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../node_modules/jquery/jquery.js"></script>

        <script type="text/javascript">




        </script>
              <style>
      a { text-decoration: none; color: grey }
      .dropbtn {

  color: grey;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: LightGray;}
#body-overlay {
position: fixed;
top: 0;
right:0;
bottom:0;
left:0;
background-color: rgba(0,0,0,0.8);
opacity: 0;
pointer-events: none
}
#body-overlay.sichtbar, .dialog.sichtbar{
  opacity: 1;
  pointer-events: auto;
}
.dialog {
  position: fixed;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 8px 8px 16px rgba(255,255,255,0.1);
  color: black;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none
}
#losDialog {
  width: 25%;
}
.dialog-schließen{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 32px;
  line-height: 32px;
  color: rgba(0,0,0,0.4);
  text-decoration: none;
}
      </style>
    </head>
   <body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="übersicht.php?parameter=empfohlen">Ö-Shop</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="übersicht.php?parameter=empfohlen">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="warenkorb.php"><i class="fas fa-shopping-cart"></i>Warenkorb</a>
        </li>
        <li class="nav-item">
        <div class="dropdown">
  <button class="dropbtn">Kategorie</button>
  <div class="dropdown-content">
    <a href="artikel.php?parameter=games">Games</a>
    <a href="artikel.php?parameter=filme">Filme</a>
    <a href="artikel.php?parameter=computer">Computer</a>
    <a href="artikel.php?parameter=audio">Audio</a>
  </div>
</div>
</li>

        <li class="nav-item">
        <a class="nav-link" href="bisherigeBestellungen.php">Meine Bestellungen</a>
        </li>
        <li class="nav-item">
       <a class="nav-link">
       <?php
 if(isset($_SESSION["eingelogt"])){
  if($_SESSION["eingelogt"]=1){
 $sEmail=$_SESSION["email"];
 try

{  
   //DB
   include 'zugangsdaten.php';
   //verbindung zur datenbank
   $conn = new PDO("mysql:host=$servername;dbname=$datenbankname", $benutzername, $benutzerpassword);
   //set the PDo error mode to exception
   $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

   $sqlBestellungWiederholen = ("SELECT loginDatum  FROM userdaten WHERE email='$sEmail' ORDER BY loginDatum DESC");
   $abfrage = $conn->prepare($sqlBestellungWiederholen);
   $abfrage->execute();
   $ergebnis = $abfrage->fetchAll();
   if(sizeof($ergebnis)== 1){
    $datumUnformatiert=date("d.m.Y");

   }else{
    $datumUnformatiert = substr(implode($ergebnis[1]),0,-28);
   }

   $dateumFormatiert= date('d-m-Y',strtotime($datumUnformatiert));
   echo"<b>Hallo ".$_SESSION["vorname"].". Du warst zuletzt am ".$dateumFormatiert." online.</b></a>";
  }catch(PDOException $e)
  {
      $handle = fopen ("error_login.txt", "w");
      fwrite ($handle, $e->getMessage());
      fclose ($handle);
  }
}
else{

  //Da nicht eingelogt ist wird auf login weitergeleitet
  header("Location: login.php");
  }
}
else{
  //Da nicht eingelogt ist wird auf artikelübersicht weitergeleitet
  header("Location: login.php");
}  
 ?>

        </li>
        <li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>

<li class="nav-item">
<a class="nav-link">          </a>
</li>
<li class="nav-item">
<a class="nav-link"></a>
</li>
<p><i class="fas fa-info"></i></p> &nbsp;&nbsp;
<li class="nav-item">
<div id="anzahlUserOnline">
<p id="online"></p>
</div>
</li>
      </ul>

    </div>




    <form method="POST" action="suche.php" class="d-flex" id=warenkorbform class=form-horizontal role=form >
  <input class="form-control me-2" type="search" placeholder="Search" id="sucheArtikel" name="sucheArtikel" aria-label="Search">
  <button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i>Suche </button>
</form>
    <a href=logout.php><i class=fas fa-sign-out-alt></i> Logout</a>
  </div>

</nav>
  <?php
  try
  {  
      //DB
      include 'zugangsdaten.php';
      //verbindung zur datenbank
      $conn = new PDO("mysql:host=$servername;dbname=$datenbankname", $benutzername, $benutzerpassword);
      //set the PDo error mode to exception
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


      if(isset($_GET["parameter"])){
        $sqlKategorie="";
        $sKategorie= filter_var($_GET["parameter"], FILTER_SANITIZE_STRING);
        if($sKategorie=="empfohlen"){
          $sqlKategorie = ("SELECT * FROM artikel WHERE empfohlen ='1'");  
        }else{
          $sqlKategorie = ("SELECT * FROM artikel WHERE kategoriename='$sKategorie'");
        }

        $abfrage = $conn->prepare($sqlKategorie);
        $abfrage->execute();
        $ergebnis = $abfrage->fetchAll();
      }

      else{



      //SQL
      $sqlKategorie = ("SELECT * FROM artikel WHERE empfohlen='1'");
      $abfrage = $conn->prepare($sqlKategorie);
      $abfrage->execute();
      $ergebnis = $abfrage->fetchAll();
      }


      echo "<a class='btn btn-default' href='übersicht.php?parameter=empfohlen' role='button'>Empfohlen</a>";
      echo "<a class='btn btn-default' href='übersicht.php?parameter=audio' role='button'>Audio</a>";
      echo "<a class='btn btn-default' href='übersicht.php?parameter=computer' role='button'>Computer</a>";
      echo "<a class='btn btn-default' href='übersicht.php?parameter=filme' role='button'>Filme</a>";
      echo "<a class='btn btn-default' href='übersicht.php?parameter=games' role='button'>Games</a>";

      echo "<br>";

      echo "<div class='row'>";

     echo "<script>
     function dialogOeffnen(dialogId){

      document.getElementById(dialogId).classList.add('body-overlay');
      document.getElementById('body-overlay').classList.add('dialog.sichtbar');
    }

    function dialogSchließen(dialogId){
      document.getElementById(dialogId).classList.remove('sichtbar');
      document.getElementById('body-overlay').classList.remove('sichtbar');

    }
    </script>
";








      foreach($ergebnis as $zeile){
        $i=0;
      echo "<div class='col-md-4'>";
      echo "<tr>";
      echo "<th><b>".$zeile["artikelname"]."  ".$zeile["artikelnr"]."</b></th><br>";
      echo "<td>".$zeile["preis"]." €</td>";
      echo "<td> <br>".$zeile["artikelbeschreibung"]." <br> <img src=".$zeile["bild"]." class=img-thumbnail height=100 width=100><br></td>";


      echo"<br></tr>";  
       echo"


       <select name=artikelMenge id=artikelMenge>
       <option value=1>1</option>
       <option value=2>2</option>
       <option value=3>3</option>
       <option value=4>4</option>
     </select>


     <script>
     function myFunction(button) {
      var artikelnr = button.getAttribute('data-artikelnr');
  //alert(artikelnr);
  //document.getElementById('preis').value =preis;
  document.getElementById('artikelnr').value =artikelnr;
  document.getElementById('menge').value =document.getElementById('artikelMenge').value;
  if (confirm('Willst du weitergeleitet werden zum Warenkorb oder weiter einkaufen?')) {
   document.getElementById('weiterleitung').value = '99';

  } else {
   document.getElementById('weiterleitung').value = '100';
  }
  console.log('weiterleitung-Wert: ' + document.getElementById('weiterleitung').value);
  document.getElementById('redirectForm').submit();

}


       </script>











     <button type=submit onclick='myFunction(this)'class=btn btn-success data-artikelnr='" . $zeile['artikelnr'] . "'>In den Einkaufswagen<i class='fas fa-shopping-cart'></i></button>";
     echo "  <div id=body-overlay></div>
 <div class=dialog id='losDialog".$i."' name='losDialog'>
 <a href=# role=button class=dialog-schließen>
 <i class=fas fa-times> </i>
 </a>
 <form action=''>
 Bestellung:
 </form>
 </div>          ";
 echo"    <a href='#' class='button einleitung-button hover-button' onclick='dialogOeffnen(losDialog".$i.")'> SOFORT KAUFEN </a>";

     $i++;
 echo"

 <script>
 alert(losDialog".$i.".value);
 </script>
 </div>";



      }

      //document.getElementById('weiterleitung').value = '100';
      echo "
      <form id='redirectForm' action='wareHinzufuegen.php' method='GET'>
<input type='hidden' id='weiterleitung' name='weiterleitung' value=''>
<input type='hidden' id='artikelnr' name='artikelnr' value=''>
<input type='hidden' id='preis' name='preis' value=''>
<input type='hidden' id='menge' name='menge' value=''>

</form>  


      </div>
";
      $conn = null;
  }
      catch(PDOException $e)
      {
          $handle = fopen ("error_login.txt", "w");
          fwrite ($handle, $e->getMessage());
          fclose ($handle);
      }



?>

   </body>
</html>

**scatello** · 07.11.2023, 06:31

$i = 0; in die Schleife zu schreiben ist nicht so der Hit.

Dein Quellcode ist fürchterlich formatiert, da solltest du mal Ordnung rein bringen, ist ja nur schwer zu lesen.

**ozgur98** · 07.11.2023, 13:21

Leider erhalte ich weiterhin eine Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'classList') . Unter Untersuchen -> Sources ist folgendes rot markiert: document.getElementById(dialogId).classList.add('body-overlay');

**scatello** · 07.11.2023, 15:57

Tja, dann wir mit getElementById ein Element gesucht, dass nicht existiert. Du könntest die dialogID mal mit alert ausgeben lassen und dann mal nachsehen, ob es ein HTML-Element mit dieser ID gibt. Wird es aber vermutlich nicht geben, aber so kannst du den Fehler einkreisen.

**ozgur98** · 07.11.2023, 18:30

Ne das passt schon wenn ich dialogId mit alert ausgebe kommt object HTMLdivElement aus.
Und bei dem Button habe ich ja onclick='dialogOeffnen(losDialog".$i.")'
div: <div class=dialog id='losDialog".$i."' name='losDialog'>
Ich hab mal das auch ohne die Schleife ausprobiert also nur für ein Artikel, jedoch kommt das gleiche auch hier..

Uncaught TypeError: Cannot read properties of null (reading 'classList')