Hjälp med en Foreach loop med data i en Modal. Javascript. Bootstrap 4.
Jag bygger en meny som ska visa data från SQL. Den loopar och radar upp titlar som jag sedan byggt en popup fönster Modal när man klickar på dom som sedan visar info om varje titel som också hämtar info från SQL.
För att det ska funka måste ID'n på Modal vara unikt. Så jag försöker får till det med att ge ID't i SQL till varje loop tillsammans med det namnet som jag gett till kontakten med Javascriptet.
Men jag får "Uncaught TypeError: Cannot read property 'style' of null at HTMLLIElement.btn.onclick"
mitt script
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none"; }
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
min blade fil
<div class="w3ls_dresses_grid_left_grid">
<h3>Brands</h3>
<div class="w3ls_dresses_grid_left_grid_sub">
<div class="ecommerce_color">
@foreach($sideBarBrands as $brands)
<ul class="panel_bottom">
<!-- Trigger/Open The Modal -->
<li id="myBtn"><a>¤ {{$brands['name']}} ¤</a></li>
<!-- The Modal -->
<div id="myModal-{{$brands['id']}}" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>{{$brands['name']}}</h3>
<br>
<h4>{{$brands['description']}}</h4>
</div>
</div>
</ul>
@endforeach
</div>
</div>
</div>
Försökt en rad olika koder i min blade fil som inte funkar. Men den denna metoden så är det Java som krånglar istället. Jag är rätt ny med Jjava så hoppas någon kan lösa detta?
