css - Make Icon Clickable in HTML

Question

I am essentially trying to replace the following EDIT and DELETE buttons with icons, but am running into issues trying to do this within HTML. The OnClick function doesn't seem to do anytihng when I click the buttons. Any ideas on how to adjust this code?

html

<div style="height:400px; overflow:auto; margin:0px 20px 20px 20px">
    <table id="userTable" class="table table-striped" style="font-family: graphik">
        <tr>
            <th>Employee</th>
            <th>Description</th>
            <th colspan="3">Stakeholder Group</th>
        </tr>
        {% for user in users %}
        <tr id="user-{{user.id}}">
            <td class="useremployee userData" name="employee">{{user.employee}}</td>
            <td class="userdescription userData" name="description">{{user.description}}</td>
            <td class="userstakeholder_group userData" name="stakeholder_group">{{user.stakeholder_group}}</td>
            <td align="center">
                <button class="btn btn-success form-control" onClick="editUser({{user.id}})" data-toggle="modal" data-target="#myModal" )">EDIT</button>
            </td>
            <td align="center">
                <img class="d-block w-100" src="{% static 'polls/images/edit.png' %}" style="cursor:pointer; width: 30px; height: 30px" alt="opmodel">
            </td>
            <td align="center">
                <img class="d-block w-100" onClick="editUser({{user.id}})" src="{% static 'polls/images/delete.png' %}" style="cursor: pointer; width: 30px; height: 30px" alt="opmodel">
            </td>
            <td align="center">
                <button class="btn btn-danger form-control" onClick="deleteUser({{user.id}})">DELETE</button>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

question from:https://stackoverflow.com/questions/65516930/make-icon-clickable-in-html

Answer 1

I think putting the image inside a link tag should do the trick

<td align="center">
    <a href="editUser({{user.id}})">
        <img class="d-block w-100" src="{% static 'polls/images/edit.png' %}" style="cursor:pointer; width: 30px; height: 30px" alt="opmodel">
    </a>
</td>