th:onclick with javascript 函数调用一直说该函数未声明

Question

Good afternoon.

My problem is that I'm trying to make a call from a button with the th:onclick tool, the function is in a .js file I've included in my html page, but everytime I try the button it says "deleteChargebox is not defined" in the browser console.

Here it is my .js file with only this function:

function deleteChargebox(idChargebox) {
    $.ajax({
        url: '/admin/chargeboxlist/delete/' + idChargebox,
        type: 'DELETE',
        success: function () {
            alert('El cargador ' + idChargebox + ' ha sido eliminado.');
            $("#table_chargeboxes").load('/');
        },
        error: function (error) {
            alert('Error, el cargador ' + idChargebox + ' no ha sido eliminado.');
        }
    });
}

Here the call I'm making:

<tr th:each="chargebox : ${chargeboxes}" th:id="${chargebox.idChargebox}">
    <td>
        <button class="btn btn-danger" id="chargeboxdeleteButton"
                th:onclick="'javascript:deleteChargebox(' + ${chargebox.idChargebox} + ')'">
            <span th:text="#{common.button.delete}"></span>
        </button>
    </td>
</tr>

And here how I'm inserting the script in the header:

<script th:src="@{'/js/admin/chargeboxlist.js' + '?v=' + ${session.version}}"
            src="../static/js/admin/chargeboxlist.js"></script>

Does anyone knows why it keeps saying that the function is not defined and how to make the call?

Thank you so much!

Answer 1

If onclick doesn't work then just select the element via document.getELementById() and apply a query selector. The Code

document.getElementById('the_id').querySelector('click', () => {
    // Do the following code here
})