Incorrect argument being passed to javascript

Question

I am building a simple website for my family to track the jigsaw puzzles they own. One feature is the ability to delete a puzzle they no longer own. I intend to pass the row ID to a separate file as an argument, but thought I should put a javascript confirmation popup in the middle. I seem to have everything running almost correctly, but the argument being passed is incorrect and I don't know why. It is passing the ID of the last row in the table, rather than the current row ID. Hoping someone can point me in the right direction.

PHP Code

while ($row = $result->fetch_assoc()) {
  echo "<script>var puzzleID = " . $row['id'] . "</script>";
  echo "<td><a href='puzzleedit.php?=" . $row['id'] . "'>Edit</a> | <button onclick='confirmationBox()'>Delete</button></td>";
}

JS Code in a separate file

function confirmationBox() {
    if (confirm("Are you sure you want to delete this puzzle?")) {
        window.location = './puzzledelete.php?=' + puzzleID
    } else {
    }
}

The interesting thing is that using $row['id'] in the edit link works as expected, it is grabbing the correct row ID from the database. The $row['id'] in the script is grabbing the table's last row ID.

Answer 1

Your loop keeps reassigning puzzleId . When you call confirmationBox() , it will have the last value that was assigned, not the one that was assigned before each <td> .

Instead of using a global variable, use a function parameter.

while ($row = $result->fetch_assoc()) {
  echo "<td><a href='puzzleedit.php?=" . $row['id'] . "'>Edit</a> | <button onclick='confirmationBox(" . $row['id'] . ")'>Delete</button></td>";
}

function confirmationBox(puzzleID) {
    if (confirm("Are you sure you want to delete this puzzle?")) {
        window.location = './puzzledelete.php?=' + puzzleID
    } else {
    }
}