使用getElementsByClassName无法获取元素存入数组且控制台无输出求助

问题原因 #

• DOM执行顺序错误：你当前的模板中{% block scripts %}的位置在{% block content %}之前，浏览器加载页面时会先执行脚本代码，此时带modal-button类的按钮还没有被渲染到DOM树中，调用getElementsByClassName自然返回空集合，存入数组后也没有元素。

修复方案 #

方案1：调整块的加载顺序（最简便） #

将{% block scripts %}整块移动到{% block content %}的后面，确保DOM元素渲染完成后再执行DOM查询逻辑，代码示例：

{% 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 %}
{% endblock %}

{% 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 %}

注意修正你原有代码末尾的笔误：{% endnlock %}改为{% endblock %}。

方案2：添加DOM加载完成监听（无需调整块顺序） #

如果不方便调整块的顺序，可以把脚本逻辑包裹在DOMContentLoaded事件回调中，等整个DOM加载完成后再执行查询：

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('hello world')
  // 也可以替换为querySelectorAll写法，多类名匹配更稳定
  // const modalBtns = [...document.querySelectorAll('.btn.btn-link.modal-button')]
  const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')]
  modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){
    console.log(modalBtn)
  }))
})
</script>
{% endblock %}

内容的提问来源于stack exchange，提问作者srinivas Gurazala