JavaScript 值传递

Question

使用 SQLite 我可以列出值

<div class="text-middle">
    <?php foreach($result as $row) ?> 
        <button class="button button1" id="myBtn" value="<?php echo $row['Id']; ?>" onclick="myFunction()"><?php echo $row['Id']; ?></button>
    <?php } ?>
</div>

但是，当我点击按钮时，它只显示弹出警报中的第一个值。

function myFunction() {
    var x = document.getElementById("myBtn").value;
    alert(x);
}

如何获取每个按钮对应的值？

Answer 1

您的所有按钮都具有相同的 id 属性。它们在页面中必须是唯一的。要解决此问题，您可以删除 id 属性并将按钮的引用传递给函数:

<div class="text-middle">
    <?php foreach($result as $row) { ?> 
        <button class="button button1" value="<?php echo $row['Id']; ?>" onclick="myFunction(this)"><?php echo $row['Id']; ?></button>
    <?php } ?>
</div>

function myFunction(el) {
    var x = el.value;
    console.log(x);
}

更好的方法是在所有按钮上放置相同的 class 并使用不显眼的 JS 代码来附加您的事件处理程序，如下所示:

<div class="text-middle">
    <?php foreach($result as $row) { ?> 
        <button class="button" value="<?php echo $row['Id']; ?>"><?php echo $row['Id']; ?></button>
    <?php } ?>
</div>

// native JS:
var buttons = document.getElementsByClassName("button");    
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        var x = this.value;
        console.log(x);
    });
}

// jQuery:
$('.button').click(function() {
    var x = this.value;
    console.log(x);
});