javascript (document.getelementbyid) in an echo not working (probably wrong usage of quotes)

Question

i'm running an while (php) which builds rows while onclick they open modals. but i'm not able to get te javascript properly in the echo.

i've read a lot on the internet but none of them are using that much quotes as me.

bit more detail then before. there's a database which is called "nuujts" and contains an 'id', 'titel', 'subtitel', 'inhoud'(content), 'aafbeelding'(html img src=on server)

underneight is a example of a hardcoded version which now needs to be extracted from the mysql server

document.getElementByID should be $row['id']

<li onclick="document.getElementById('2').style.display='block'" class="w3-border">
   <a href="#">
      <div class="w3-row">
         <img src="images/tumbnail.png" class="w3-image w3-third">
         <div class="w3-twothird"><h6>Leever Bontje Middig</h6>Bòntje middig geörganiseerd door V.V. De Tuinhagedisse</br></br>Laes verder -></div>
      </div>
   </a>
</li>
<div id="2" class="w3-modal">
   <div class="w3-modal-content w3-text-black w3-animate-zoom">
      <header class="w3-container w3-text-white" style="background-color: #005415;">
         <span onclick="document.getElementById('2').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Sjloete">&times;</span>
         <h2>Leever Bòntje Middig</h2>
      </header>
      <p>Bòntje middig geörganiseerd door vv de Tuinhagedisse</p>
      Bòntje middig geörganiseerd door vv de Tuinhagedisse veur miense oet Leeve én omsjtreke!</br>
      Mit o.a. optraejes van Toeter Thijs en Pyure.</br>
      De middig begint om 14.00 oer (zaal aope vanaaf 13.30 oer).</br>
      <p>Ein kaertje kost €5,00, daoveur krieg geer entree & koffie mit vlaai.</p>

      <p>Sjpisjaal veur de miense die van boete Leeve komme, is dur GRATIS verveur geregeld. Opsjtapplaatse: de Donderie en 't Paradies.</p>

      Kaertjes kinne besjteld waere via:</br>
      julia.orval@gmail.com óf jmhn@xs4all.nl</br>
      Gaef naam, adres, tillefoonnummer en 't aantal luuj door véúr 27 fibberwarie. VOL=VOL</br>

      Wilt geer meer informatie hubbe? Gebroek dan baovesjtaonde mailadressen of bel nao 06-16353489.
   </div>
</div>

<?php
   $sql = "SELECT * FROM nuujts";
   $result = $conn->query($sql);

   if ($result->num_rows > 0 ) {
      while ($row = $result->fetch_assoc()) {
         echo "<li onclick='document.getElementById(".$row['id'].").style.display'block'' class='w3-border'>";
            echo "<a href='#'>";
               echo "<div class='w3-row'>";
                  echo $row['aafbeelding'];
                  echo "<div class='w3-twothird'><h6>".$row["titel"]."</h6>".$row["subtitel"]."</br></br>Laes verder -></div>";
               echo "</div>";
            echo "</a>";
         echo "</li>";
         echo "<div id='".$row["id"]."' class='w3-modal'>";
            echo "<div class='w3-modal-content w3-text-black w3-animate-zoom'>";
               echo "<header class='w3-container w3-text-white' style='background-color: #005415'>";
                  echo "<span onclick='document.getElementById(".$row['id'].").style.display='none'' class='w3-button w3-xlarge w3-hover-red w3-display-topright' title='Sjloete'>&times;</span>";
                  echo "<h2>".$row["titel"]."</h2>";
               echo "</header>";
               echo "<p>".$row["subtitel"]."</p>";
               echo $row["inhoud"];
            echo "</div>";
         echo "</div>";
      }
   }
?>

nothing happens but the modal should open. i believe the issues lays in the quotes but i can't wrap my head around the right quote usage

Answer 1

You can always simplify your PHP and not embed javascript but instead rely on javascript outside of PHP.

First, instead of onclick, output the id into a data attribute of id and add an additional class. Then use javascript to add click event handlers.

echo "<li data-id='{$row['id']}' class='show-modal w3-border'>";

echo "<span data-id='{$row['id']}' class='hide-modal w3-button w3-xlarge w3-hover-red w3-display-topright' title='Sjloete'>&times;</span>";


var objs = document.getElementsByClassName('show-modal');

for(var i = 0; i < objs.length; i++) {
  (function(index) {
    objs[index].addEventListener("click", function() {
       document.getElementById(this.dataset.id).style.display = 'block';
     })
  })(i);
}

var objs = document.getElementsByClassName('hide-modal');

for(var i = 0; i < objs.length; i++) {
  (function(index) {
    objs[index].addEventListener("click", function() {
       document.getElementById(this.dataset.id).style.display = 'none';
     })
  })(i);
}