Tengo un archivo javascript project_dashboard.js con algunas cosas definidas dentro y un archivo html donde trato de llamar a dicha función (entre otras cosas).
Por alguna razón, sigo recibiendo el error de que la función is not defined at HTMLButtonElement.onclick . Lo que me vuelve loco es que la primera parte del .js está cargada y funciona (el css se cambia si hago clic en la tabla). Entonces el script está ahí, pero no puedo usar la función.
tablero_proyecto.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 %}Debe envolver el nombre de la función entre comillas, como lo hace con todos los atributos, y colocar el script que contiene la función antes de llamar a la función.
<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>