当通过 for 循环创建按钮时，如何将 var 分配给各个按钮的 innerHTML？

Question

使用 Django，我的按钮是使用 for 循环创建的，并根据模型值分配值。

根据点击的按钮，我想用按钮的 innerHTML 更新“new_note_header”。

我创建了以下 JavaScript，但仅在单击第一个按钮时有效。

<script>
function ProjectSelect () {
    var x = document.querySelector('button').innerHTML;
    document.getElementById('new_note_header').innerHTML = x;
}

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('button').onclick = ProjectSelect;
});


</script>

<div class = project_container>
    {% for project in projects %}
        <button class = individual_project_container>
            {{ project }}
        </button>
    {% endfor %}
</div>
<div class = note_header_container>
    <div class = new_note_header, id = new_note_header>
        New Note
    </div>
</div>

如果您能帮助我调整 JavaScript 使其适用于所有点击的按钮，我将不胜感激。

非常感谢

Answer 1

querySelector 将采用第一个满足选择器的元素

您可以使用 querySelectorAll 并为每个分配一个点击事件处理程序，但我建议使用委托：

document.addEventListener('DOMContentLoaded', function() {
  const nnHead = document.getElementById('new_note_header');
  document.getElementById("project_container").addEventListener("click", e => {
    const tgt = e.target.closest("button");
    if (!tgt.matches(".individual_project_container")) return; // not a button
    nnHead.textContent = tgt.textContent.trim();
  });
});

<div class="project_container" id="project_container">
  <button class="individual_project_container">Project 1</button>
  <button class="individual_project_container">Project 2</button>
  <button class="individual_project_container">Project 3</button>

</div>
<div class="note_header_container">
  <div class="new_note_header" id="new_note_header">
    New Note
  </div>
</div>

当通过 for 循环创建按钮时，如何将 var 分配给各个按钮的 innerHTML？

How can I assign the var to the innerHTML of individual buttons when the buttons are created through a for loop?

javascript

html

django-models