Flask中Jinja循环生成按钮点击时段落文本仅显示最后迭代内容的问题

你现在的问题出在两个地方：

• 每次循环都重新定义change_text()函数，后面循环生成的函数会覆盖前面所有的，所以不管点哪个按钮，执行的都是最后一次循环里定义的函数，自然只会显示最后一个x.task_id。
• 点击按钮时没有把当前任务的ID传给函数，函数不知道要显示哪条数据。

方案一：给函数传参数（最直观，适合新手） #

把函数定义移到循环外面，只写一次，然后每个按钮点击时把对应的task_id传进去：

修改后的完整代码：

<table class="table">
  <tr>
    {%for i in days: %}
    <td>
      <table>
        <tr>
          <th>
            {{ days[i] }}
            <hr class="zero">
          </th>
        </tr>
        {%for x in tasks: %}
        {%if x.owner_id == i: %}
        <tr>
          <td>
            <!-- 这里修改onclick，把当前x.task_id作为参数传进去 -->
            <button class="click" onclick="change_text('{{ x.task_id }}')">{{ x.task_name }}</button>
            <hr class="zero">
          </td>
        </tr>
        {%endif%}
        {%endfor%}
      </table>
    </td>
    {%endfor%}
  </tr>
</table>

<!-- 把函数移到循环外面，只定义一次 -->
<script>
function change_text(taskId){
    document.getElementById("demo").innerHTML = taskId;
}
</script>

改动说明： #

1. 把<script>块从tasks循环里移到整个表格外面，这样change_text()只会被定义一次，不会被覆盖。
2. 按钮的onclick改成change_text('{{ x.task_id }}')，点击时把当前任务的ID传给函数。
3. 函数里接收taskId参数，用这个参数设置demo元素的内容。

方案二：用data属性（更规范的写法） #

如果不想在onclick里写参数，也可以给按钮加自定义data属性，然后通过事件获取这个值：

<table class="table">
  <tr>
    {%for i in days: %}
    <td>
      <table>
        <tr>
          <th>
            {{ days[i] }}
            <hr class="zero">
          </th>
        </tr>
        {%for x in tasks: %}
        {%if x.owner_id == i: %}
        <tr>
          <td>
            <!-- 给按钮加data-task-id属性，存当前任务ID -->
            <button class="click" data-task-id="{{ x.task_id }}">{{ x.task_name }}</button>
            <hr class="zero">
          </td>
        </tr>
        {%endif%}
        {%endfor%}
      </table>
    </td>
    {%endfor%}
  </tr>
</table>

<script>
// 给所有click类的按钮绑定点击事件
document.querySelectorAll('.click').forEach(button => {
    button.addEventListener('click', function(){
        // 获取当前按钮的data-task-id值
        const taskId = this.getAttribute('data-task-id');
        document.getElementById("demo").innerHTML = taskId;
    });
});
</script>

改动说明： #

1. 按钮去掉onclick，加data-task-id="{{ x.task_id }}"，把任务ID存在这个属性里。
2. 用JS给所有带click类的按钮绑定点击事件，点击时从按钮自身的data属性里取ID，再设置到demo元素。

这两种方法都能解决你的问题，方案一更简单直接，适合JS零基础的情况；方案二更符合现代JS写法，扩展性更好。

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