Passing Dynamic Button Data to a Hidden Input

Question

I'm trying to pass one data-id from a series of buttons to a hidden-input field. However, the adEventListener doesn't seem to be working properly because it just cycles to the end, leaving me with hidden_temp_id set to the last data-id from the series.

PHP/HTML:

<?php
while ($row=mysqli_fetch_array($select)) 
{
 ?>
<button class="openModal" id="edit_form<?php echo $row['id'];?>"  data-target="#id02" data-id="<?php echo $row['id'];?>"  onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
 ?>

Javascript:

    var openModalButtons = document.getElementsByClassName("openModal");
    for (var i = 0; i < openModalButtons.length; i++) {
        openModalButtons[i].addEventListener('click', myFunction(i), false);
        //console.log(i);
        console.log(openModalButtons[i]);
        console.log(document.getElementById('hidden_temp_id').value);
        console.log($(openModalButtons[i]).data("id"));
        }   
    function myFunction(i){
    document.getElementById('hidden_temp_id').value=$(openModalButtons[i]).data("id");
};

Answer 1

可能是您使用这样的“ id”

<button class="openModal" id="edit_form<?php echo $row['id'];?>"  data-target="#id<?php echo $row['id'];?>" data-id="<?php echo $row['id'];?>"  onclick="document.getElementById('id<?php echo $row['id'];?>').style.display='block'">Edit</button>