Django for循环生成按钮 点击获取innerHTML更新指定元素方法

你的代码只有第一个按钮生效是两个核心原因导致的：

1. document.querySelector('button') 只会返回页面匹配到的第一个button元素，Django模板for循环生成的其他按钮根本没有绑定点击事件
2. 事件处理函数ProjectSelect内部又写了一次document.querySelector('button')，就算给所有按钮绑了事件，执行时也永远只会取第一个按钮的内容，不会读取当前被点击按钮的内容。
   另外你的HTML模板里还有个小语法错误：class属性后面多写了逗号，属性值也没加引号，不符合HTML规范。

提供两种可直接落地的写法，第二种更适合动态生成元素的场景：

方案1：遍历所有按钮绑定事件 #

直接替换你原来的script标签内容即可：

<script>
function ProjectSelect (e) {
    // e.target是触发本次点击事件的元素，也就是当前被点的按钮
    // trim()用来去掉Django模板渲染时按钮标签和变量之间多余的换行、空格
    const btnText = e.target.innerHTML.trim();
    document.getElementById('new_note_header').textContent = btnText;
}

document.addEventListener('DOMContentLoaded', function () {
    // 选中所有带individual_project_container类的按钮
    const allProjectBtns = document.querySelectorAll('.individual_project_container');
    // 遍历给每个按钮绑定点击事件
    allProjectBtns.forEach(btn => {
        btn.addEventListener('click', ProjectSelect);
    })
});
</script>

方案2：事件委托（推荐） #

不用给每个按钮单独绑定事件，直接把事件绑在按钮的公共父容器上，哪怕后续你动态新增项目按钮，也不需要重新绑定事件，性能更好：

<script>
document.addEventListener('DOMContentLoaded', function () {
    const projectWrap = document.querySelector('.project_container');
    const headerEl = document.getElementById('new_note_header');

    projectWrap.addEventListener('click', function(e) {
        // 校验点击的目标是项目按钮才执行逻辑
        if (e.target.matches('.individual_project_container')) {
            headerEl.textContent = e.target.innerHTML.trim();
        }
    })
});
</script>

把你原来的new_note_header那行标签修正成符合规范的写法，去掉多余的逗号，给属性值加引号：

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

提示：如果按钮里展示的是纯文本，用textContent代替innerHTML更安全，可以避免XSS注入风险。

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