复制按钮仅能复制首个用户经纬度值的问题及代码求助

嘿，这个问题的核心原因很简单：你循环生成的所有输入框都用了同一个id="he"，而浏览器里document.getElementById()只会返回页面中第一个匹配该id的元素，所以不管你点击哪个用户的复制按钮，都会拿到第一个输入框的值。

咱们可以用两种简单的方式修复这个问题：

方法1：通过元素关系传递目标输入框（无需唯一ID） #

这种方法不需要给每个输入框设置唯一ID，直接利用按钮和输入框的相邻关系来获取目标元素：

修改你的PHP循环代码和JavaScript函数如下：

<?php 
require_once('connection.php'); 
$sql = "SELECT ftname, menu, longlan FROM ownerinfo"; 
$result = $con->query($sql); 

if ($result) { 
    $a = 1;
    while($row = $result->fetch_assoc()) { 
        $long[$a] = $row["longlan"]; 
        echo "Food Truck: " . $row["ftname"]. " <br>Menu: " . $row["menu"]. " <br>Longitude Latitude: <input value='".$long[$a]."'></input><button onclick='myFunction(this.previousElementSibling)'>Copy</button><br> <a href='https://maps.google.com/'>Maps</a> <hr>"; 
        $a++; 
    } 
} else { 
    echo "0 results"; 
} 
?> 

<script>
function myFunction(copyText) {
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}
</script>

改动说明： #

• 去掉了输入框的id属性，不需要依赖唯一ID
• 按钮的onclick改成myFunction(this.previousElementSibling)，this指当前点击的按钮，previousElementSibling就是它前面紧邻的输入框元素
• JavaScript函数接收传入的copyText元素，直接操作它即可

方法2：给每个输入框设置唯一ID #

如果你还是想保留ID，可以给每个输入框生成唯一的ID，结合循环计数器实现：

<?php 
require_once('connection.php'); 
$sql = "SELECT ftname, menu, longlan FROM ownerinfo"; 
$result = $con->query($sql); 

if ($result) { 
    $a = 1;
    while($row = $result->fetch_assoc()) { 
        $long[$a] = $row["longlan"]; 
        echo "Food Truck: " . $row["ftname"]. " <br>Menu: " . $row["menu"]. " <br>Longitude Latitude: <input id='he-".$a."' value='".$long[$a]."'></input><button onclick='myFunction(\"he-".$a."\")'>Copy</button><br> <a href='https://maps.google.com/'>Maps</a> <hr>"; 
        $a++; 
    } 
} else { 
    echo "0 results"; 
} 
?> 

<script>
function myFunction(elementId) {
    var copyText = document.getElementById(elementId);
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}
</script>

改动说明： #

• 输入框的ID改成了he-<?php echo $a; ?>，比如第一个是he-1，第二个是he-2，保证每个ID唯一
• 按钮的onclick改成myFunction("he-".$a."")，把当前输入框的唯一ID传给函数
• JavaScript函数根据传入的ID获取对应的输入框元素

两种方法都能解决你的问题，推荐第一种，代码更简洁，不需要维护额外的ID。

内容的提问来源于stack exchange，提问作者Syafiq