循環內的javascript函數不起作用

Question

我正在顯示在線用戶。 當我單擊一個用戶時，相應的用戶應顯示在下面的文本框中。 我為此使用javascript，但是它僅使用第一個用戶。 當我單擊第二個用戶時，第一個用戶將顯示在下面的文本框中。 為什么只采用第一個數組？

<?php
    foreach($query as $row)
    {
    ?>
        <input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
<?php
    }
    ?>
    <script>

    function select_online()
    {
        var user=document.getElementById("user").value;
        document.getElementById("usersonline").value=user;
    }
    </script>


Name:<input type="text" name="usersonline" id="usersonline">

Answer 1

首先，對許多元素使用相同的id是一個錯誤。 您應該為生成的輸入設置不同的id屬性。

其次，您應該使用this來獲取當前元素的值：

function select_online()
{
    var user=this.value;
    document.getElementById("usersonline").value=user;
}

document.getElementById("user")語句將始終選擇id屬性等於“ user”的元素，並且該元素將始終相同。 很有可能，這不是您想要的。 如果我對您的理解正確，則希望獲得clicked元素的value ，因此，正如我之前提到的，您可以使用this表達式來實現它， this表達式指向當前被單擊的元素。

Answer 2

您應該給輸入一個唯一的名稱。 您無法多次重用id =“ user”，否則javascript將無法找到每個輸入元素。

以下將更好：

<?php
    $id = 0;
    foreach($query as $row) {
        $id += 1;
?>
<input type="text" name="user" id="user-<?php echo "$i"; ?>" value="<?php echo $row->users;?> onclick="select_online(<?php echo "$i"; ?>)">
<?php
    }
?>

<script>
    // Move script outside loop
    function select_online(i) {
        var user = document.getElementById("user-" + i).value;
        document.getElementById("usersonline").value = user;
    }
</script>

Name:<input type="text" name="usersonline"id="usersonline">

Answer 3

根據HTML標准，文檔中應該有唯一的ID。 但是在您的情況下，您正在生成id = user多個輸入標簽。 Javascript的document.getElementById只能獲取id = user元素。

為此，您可以像這樣更改代碼：

<?php foreach($query as $row) {  ?>
    <input type="text"   name="user"  id="user"   value="<?php echo $row->users;?>" onclick="select_online(this)">
<?php } ?>
<script> 
function select_online(elm) {
    var user=elm.value;
    document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">

在點擊這里，我們傳遞了輸入標簽的引用。 這樣我們就可以得到點擊輸入的參考值。

Answer 4

 <input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">

您正在將所有用戶的id設置為user，因此當您使用選擇器document.getElementById（“ user”）時，它始終會提取第一行。

切勿對多個元素使用相同的ID。 它將始終導致錯誤。