I have a javascript file project_dashboard.js with a few things defined inside of it and an html file where I try to call such function (amont other things).
For some reason, I keep getting the error that the function is not defined at HTMLButtonElement.onclick. What drives me crazy is that the first part of the .js is loaded and works (the css is changed if I click on table). So the script is there, but I can't use the function.
project_dashboard.js
$('table').on('click', 'tr.parent .fa-chevron-down', function(){
$(this).closest('tbody').toggleClass('open');
});
function EnablePositionEdit(position_id) {
const checked_events = []
$("#edit_button_____" + position_id).toggle()
$("#save_button_____" + position_id).toggle()
$("#delete_____" + position_id).toggle()
inputs = document.querySelectorAll(".availability_____" + position_id + " input")
inputs.forEach(input => {
input.removeAttribute("disabled")
})
}
html
{% extends 'action/base.html' %}
{% block extrastylesheets %}
{% endblock extrastylesheets %}
{% block content %}
<head>
{% load static %}
<link rel="stylesheet" href="{% static 'action/css/project_dashboard.css' %}">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
...
<div id="edit_button_____{{ position.id }}" style="display: block;">
<button class="btn" style="font-size:10px; color: rgb(59, 89, 152);" onclick = EnablePositionEdit('{{ position.id }}')> <i class="fa fa-pencil"></i> </button>
</div>
...
{% endblock content %}
{% block extrascripts %}
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script type="text/javascript" src="{% static 'action/js/project_dashboard.js' %}"></script>
<script>
$(document).ready(function() {
$('.summernotable').summernote({
toolbar: [],
});
});
....
</script>
{% endblock extrascripts %}
You have to wrap the function name in quotes, as you do for all attributes, and place the script that contains the function before you call the function.
<script type="text/javascript" src="{% static 'action/js/project_dashboard.js' %}"></script>
<button class="btn" style="font-size:10px; color: rgb(59, 89, 152);" onclick = "EnablePositionEdit('{{ position.id }}')"> <i class="fa fa-pencil"></i> </button>