{% block scripts %} <script> console.log('hello world') const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')] modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){ console.log(modalBtn) })) </script> {% endblock %} {% block content %} <div class="h1">Quiz List</div> <hr> {% for obj in object_list %} <button class="btn btn-link modal-button" data-pk='{{obj.pk}}' data-quiz='{{obj.name}}' data-questions='{{obj.number_of_questions}}' data-difficulty='{{obj.difficulty}}' data-time='{{obj.time}}' data-pass='{{obj.required_score_to_pass}}' data-bs-toggle="modal" data-bs-target="#quizStartModal">{{obj.name}}</button><br> {% endfor %} {% endnlock %}No se puede ver el resultado en la consola y los elementos que están en la clase 'modal-button' tampoco se insertan en la matriz de modalBtns
Si bien el tiempo de ejecución, los botones no existen ya que no se procesan, en su lugar, agregue los botones primero y luego agregue el JS
{% endblock %} {% block content %} <div class="h1">Quiz List</div> <hr> {% for obj in object_list %} <button class="btn btn-link modal-button" data-pk='{{obj.pk}}' data-quiz='{{obj.name}}' data-questions='{{obj.number_of_questions}}' data-difficulty='{{obj.difficulty}}' data-time='{{obj.time}}' data-pass='{{obj.required_score_to_pass}}' data-bs-toggle="modal" data-bs-target="#quizStartModal"> {{obj.name}} </button> <br> {% endfor %} {% endnlock %} {% block scripts %} <script> console.log('hello world') const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')] modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){ console.log(modalBtn) })) </script>Parece que el dom no está procesando los botones antes de que la etiqueta del script invoque su JS.
Intente envolver el código del script dentro de un detector de eventos de carga.
Entonces su código en la etiqueta del script va de esto:
<script> console.log('hello world') const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')] modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){ console.log(modalBtn) })) </script>A esto:
<script> window.addEventListener('load', (event) => { console.log('hello world'); const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')]; modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){ console.log(modalBtn); })); }); </script>