Trouble getting JavaScript to run multiple times on click for button-CodePudding

Problem: On the html page, it is able to run the JS file once (allow a the modal to pop out and display the contents) however the button "Full Listing" is only able to work on the first option and each page (different search which filters the rows returned). Every other click of full listing button other than the first does not do anything.

The full button listing buttons are there for every row, it just doesn't function for anything other than the first row.

I've tried changing the position and echoing the JS code, but to no avail and have no idea what to try next.

Any help to point out where I've gone wrong or what I could try to fix this problem would be greatly appreciated.

foreach($catalogue as $row){  

?>

<div class="cat_row" >
<div class="card"  >
<div class="card-header">
  <?php echo $row['vname']; ?>
</div>
<div class="card-body text-left flex"  >
  <div class="half">
    <span class="car_text">Year : <?php echo $row['myear']; ?></span><br/>
    <span class="car_text">Seats : <?php echo $row['seats']; ?></span><br/>
    <span class="car_text">Odometer : <?php echo $row['odometer']; ?></span><br/>
    <span class="car_text">Price : <?php echo $row['price']; ?></span><br/>
    <span class="car_text">Make : <?php echo $row['make']; ?></span><br/>
    <span class="car_text">Body style : <?php echo $row['bodystyle']; ?></span><br/>
    <span class="car_text">Fuel : <?php echo $row['fuel']; ?></span><br/>
  </div>
  <div class="half">
    <img class="car_image" src="image_builder.php?id=<?php echo $row['catalogid']; ?>" >
    </div>
    </div>

Button and JS which is a part of the same php file

 <script> var modal = document.getElementById("Modal");

// Get the button that opens the modal
var btn = document.getElementById("Button");

// 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>
     

</div>
    </div>
</div>
  </div>
  
</div>

<?php } ?>

CodePudding user response：

An ID is expected to be unique. The DOM will only qualify the first ID = 'Button'. You will need to use

then use:

var btn = document.getElementsByClassName("Button")

This also applies to ID="Modal". It will have to be changed to a class if every row has it's own modal.

The tricky part will be to associate which button shows/hides which modal. There's many different ways this can be done. I would show one way here, but you're not using jQuery so I'm not familiar with doing it with document objects.