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);
});

Answer 2

不要对多个元素使用相同的id : id="myBtn“

更改您的函数：

onclick="myFunction()"

至：

onclick="myFunction(this)"

因此：

function myFunction(element) {
      var x = element.value;
      alert(x);
}

Answer 3

您需要通过它们的类来获取元素，而不是通过它们都共享的id (这不是一件好事情)。

<script>
function myFunction() {
  var x = document.getElementsByClassName("button1");
  for (var i = 0; i < x.length; ++i) {
    alert(x[i].value);
  }
}
</script>