php行，每行都有一个按钮，我想重定向到外部页面

Question

I have displayed 4 rows of a table (gids) from phpmyadmin. Now I have added for each row a button, I want to redirect each button to an external page (book.php). Now when I use the classname "data" in javascript to try to redirect to book.php, this doesn't work for all 4 buttons.
What should I change so these buttons work for each row?

        <div class="row">

    <?php 

    if(isset($_SESSION['FBID'])){


    // Create connection
    $conn = new mysqli("localhost", "root", "root", "phpproject");
    // Check connection
    if ($conn->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT gids_voornaam, gids_naam, gids_bio, gids_richting, gids_jaar, gids_stad FROM gids";
    $result = $conn->query($sql);

if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo 
'<div class="col-sm-4">'.
            "<br>".'<img class="img-rounded img-responsive" src="http://placehold.it/150">'.
            "<br>"."voornaam: ".$row["gids_voornaam"].
            "<br>". "Achternaam: ". $row["gids_naam"].
            "<br>". "Richting: ". $row["gids_richting"].
            "<br>". "Jaar: ". $row["gids_jaar"].
            "<br>". "Biografie:  " . $row["gids_bio"]. 
            "<br>"."<br>".'<button type="submit" class="data" >boekingsdata</button>'.
'</div>';



     }
} else {
     echo "0 results";
}

$conn->close();
}


     ?>
         </div>



  <script>


var btn = document.getElementsByClassName('data');
btn.addEventListener('click', function() {
  document.location.href = 'book.php';
});


  </script>

Answer 1

var btn is an array so you need to read as an array.

Try this:

var btn = document.getElementsByClassName('data');

for(var item in btn){
    btn[item].addEventListener('click', function() {
        document.location.href = 'book.php';
    });
}