document.getElementById().value 不工作答案

【问题标题】：document.getElementById().value is not Workingdocument.getElementById().value 不工作
【发布时间】：2020-11-19 13:32:42
【问题描述】：

我一直在做一个关于员工的项目所以mysql数据库中有一些数据。所以为了得到它并将它放入一个 html 表中，我使用了 php。

$sql = "SELECT * FROM Stock_Management.`staff_details`";
$result = mysqli_query($conn, $sql);

if(mysqli_num_rows($result)){
    while($row = mysqli_fetch_assoc($result)){
        echo "<tr>
                <td scope='row'>".$row['id']."</td>
                <td>".$row['fname']."</td>
                <td>".$row['lname']."</td>
                <td>".$row['phno']."</td>
                <td>".$row['employee_address']."</td>
                <td>".$row['join_date']."</td>
                <td><i class='far fa-edit btnedit' value=".$row['id']." name='btn-edit' id='btn-edit' onclick='edit()' style='color: green; cursor: pointer'></i></td>
                <td><i class='far fa-trash-alt btndelete' value='".$row['id']."' name='btn-delete' id='btn-delete' onclick='delete()' style='color: tomato; cursor: pointer'></i></td>
            </tr>";
    }
}

因此，如果您看到最后两个 td 标签，您会看到我使用了 font awesome 并分别给它们 values 和 name 和 id 属性。还有onclick 带有函数的事件。

echo "<script>
    function edit(){
        let data_id = document.getElementById('btn-edit');
        console.log(data_id.value);
    }
</script>";

但每次我在控制台中获取undefined。那么我的代码有什么问题。请帮我！！请。

【问题讨论】：

前面的属性'".$row['id']."'需要加引号
btn-edit 是一个 <i> 元素。那些没有value 属性。
@NigelRen 不，兄弟，它不起作用'.....顺便说一句，感谢您的尝试。
按照您的逻辑，您将重复id，这是不行的。将function edit(){ 更改为function edit(element){ 并使用onclick='edit(this)' 传递它。然后，您将不必寻找它。要获得value，您可以致电element.getAttribute('value')。
您可以在元素上使用.getAttribute('value')。但data attributes 在这种情况下可能更合适。

标签： javascript php html mysql

【解决方案1】：

为了获取值，您可以将 js 代码更改为：

function edit(){
    console.log(event.target.value)
}

通过点击它，浏览器会创建事件，您可以将其作为目标来获取点击值。

另外，您在 value value=".$row['id']." 周围缺少“'”。请记住，您不应在页面上多次出现相同的 id，因此如果您有多个具有此 id 的元素，则定位 btn-edit 将永远无法工作。

你不应该在按钮上使用“”标签

【讨论】：

这将不起作用，因为 value 不是 i 的属性。
你应该使用

【解决方案2】：

将元素中的“值”更改为

data-value

更改 javascript 行 'console.log(data_id.value);'到

console.log(data_id.dataset.value);

更多关于js数据集使用的信息请访问https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

另外，<i> 元素不包含 value 属性。

【讨论】：

【解决方案3】：

1.<i>标签不能添加值和名称，你应该使用输入标签， 2.如果你用这个，我希望你没有任何问题；

<label class='far fa-edit btnedit' onclick='edit()' style='color: green; cursor: pointer;font-size: 25px;'>
    <input type='hidden' id='btn-edit' name='btn_edit' value='".$row['id']."'/>
</label>


<script>
    function edit(){
        let data_id = document.getElementById('btn-edit');
        console.log(data_id.value);
    }
</script>

【讨论】：