How to get the value of while loop(PHP) using JavaScript?

Question

I have this while loop in PHP

<?php
while ($row = mysqli_fetch_assoc($getPosts)) {
  $post_id = $row['post_id'];                  


 echo "<td><a rel='$post_id' id='get_post_id' 
 onclick='active_del_modal()'>Delete</a></td>";

}   
?>    

In this loop, when we click on the "delete" link, the value of variable "$post_id" changes. I want to get the value of "$post_id" when it changes. I tried with this JS code

function active_del_modal() { 
  var x = document.getElementById("get_post_id").getAttribute("rel");
  alert(x);
}

But it only gives me the last value of "$post_id". I want to get each value of "$post_id" when it changes and this value should be individual, not like this 23 46 545 545, etc. I don't want to use any framework like jQuery.

Answer 1

Method 1 - minimum change

onclick='active_del_modal(this)' 

and you can use

function active_del_modal(link) { 
  var x = link.getAttribute("rel");
  alert(x);
}

Method 2 - better:

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target, rel = tgt.getAttribute("rel");
    if (rel) alert(rel);
  })
})

I recommend using data-attributes instead of rel:

If you change id to class, you can do this

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("get_post_id")) {
      const id = tgt.dataset.id;
      console.log(id);
    }
  })
})

using

echo "<td><a data-id='$post_id' class='get_post_id'>Delete</a></td>";

LASTLY if the link is supposed to delete the row, you can do

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("delete")) {
      tgt.closest("tr").remove();
    }
  })
})

using

echo "<td><button type="button" class='delete'>Delete</button></td>";

Answer 2

• An ID must be unique in a document. So stop using static IDs in a loop.
• Links go somewhere. Don't use a link if you aren't navigating. Use a button if you want something to click on to trigger JS. Apply CSS if you don't like the default appearance of a button.
• A post ID is not a type of relationship. Don't abuse rel attributes. (Appropriate use would be something like <a href="page2.html" rel="next"> ) Use a data-* attribute if you need to associate custom data with an element.
• Intrinsic event attributes have a bunch of gotchas associated with them. Don't use them. Use addEventListener and friends instead.

 function active_del_modal(event) { const button = event.target; const id = button.dataset.postId; console.log({ id }); } document.querySelector("#delete-buttons").addEventListener("click", active_del_modal);

 button { border: none; background: none; colour: blue; cursor: pointer; } button:hover { text-decoration: underline; }

 <ul id="delete-buttons"> <li><button type="button" data-post-id="$post_id">Delete</button></li> <li><button type="button" data-post-id="foo">Delete</button></li> <li><button type="button" data-post-id="bar">Delete</button></li> </ul>