document.getElementById().value is not Working

Question

I have been workin' on a project about employees So there is some data in the mysql database. So to get that and put it into a html table I used 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>";
    }
}

So if you see the last two td tags you can see I used font awesome and gave them values respectively with name and id Attributes. And also onclick event with a function.

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

But Every time I am Getting undefined in the console. So what's Wrong with my code. Please Help Me.! Please.

Answer 1

In order to get the value you could change js code to:

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

By clicking it browser creates event which you can target to get clicked value.

also, you are missing "'" around value value=".$row['id']." keep in mind that you should not have multiple occurrences of the same id on the page so targeting btn-edit will never work if you have multiple elements with this id.

You should not use "" tag for a button

Answer 2

Change 'value' in your element to

data-value

Change the javascript line 'console.log(data_id.value);' to

console.log(data_id.dataset.value);

For more information on the use of js dataset visit https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Also, the <i> element does not contain the value property.

Answer 3

1.you can not add value and name to tag <i> ,you should use input tag, 2.if you use this, I hope you don't have any problem with that;

<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>