在Python Flask应用中调用JS函数时if与else分支均执行的问题

我在Python Flask应用中调用一个带if-else逻辑的简单JavaScript函数时遇到异常，但该函数在纯JS+HTML的测试环境中能正常运行。

问题代码（JavaScript） #

let changed = false;
console.log("Changed = " + changed);

function changeColor() {

    if (changed == true ) {
        document.getElementById("bg1").style.backgroundColor = "red";
        changed = false;
        console.log("Changed to red (Changed = " + changed + ")");
    } else {
        document.getElementById("bg1").style.backgroundColor = "green";
        changed = true;
        console.log("Changed to green (Changed = " + changed + ")");
    }  
};

不同环境表现 #

• 纯HTML测试环境：函数正常工作，每次点击会切换背景色，控制台交替输出对应日志，逻辑符合预期
• Flask应用内运行：点击一次会触发函数同时执行if和else分支，控制台同时出现"Changed to red"和"Changed to green"两条日志，背景色最终由最后执行的分支决定
• Flask控制台手动调用：直接在浏览器控制台输入changeColor()调用函数，分支逻辑正常，每次调用只会执行其中一个分支，控制台输出单条日志

Flask中调用函数的HTML代码 #

<ul class="list-group">
  {% for item in RecepieIngredients.query.filter_by(recepie_id = picked_recepie.id) %}
  <li class="list-group-item" id="bg{{ item.id }}"  >
    <div class="form-check" onclick="changeColor()">
      <input class="form-check-input me-2" type="checkbox" value="" id="{{ item.id }}">
      <label class="form-check-label stretched-link" for="{{ item.id }}">
      {% if item.amount % 1 == 0 %}
        {{ "%.0f"|format(item.amount|float) }} {{ item.unit }} {{ item.ingredient }}
      {% else %}
        {{ item.amount }} {{ item.unit }} {{ item.ingredient }}
      {% endif %}
      </label>
    </div>
  </li>
  {% endfor %}           
</ul>

我希望搞清楚问题原理，之前没找到相关解决方案，寻求帮助。

问题解决与后续优化 #

在各位建议下，我已解决上述问题（暂未测试mplugjan的方案，后续会验证）。

解决后我又遇到HTMLCollection相关问题，现已修复，实现了可点击的动态UL列表，以下是处理代码：

处理HTMLCollection的JavaScript代码 #

let instructionsCollection = document.getElementsByClassName("instructions");
for (let i = 0; i < instructionsCollection.length; i++) {
    for (v = 0; v <= instructionsCollection.item(i).childElementCount - 1; v++) {
        instructionsCollection.item(i).children[v].addEventListener("click", stepChangeColor);
    }
}


function stepChangeColor() {
    if (document.getElementById(this.id).style.backgroundColor != stepDoneBackgroundColor) {
        document.getElementById(this.id).style.color = stepDoneTextColor;
        document.getElementById(this.id).style.backgroundColor = stepDoneBackgroundColor;
    } else {
        document.getElementById(this.id).style.color = stepDefaultTextColor;
        document.getElementById(this.id).style.backgroundColor = stepDefaultDoneBackgroundColor;
    }
    console.log("Step clicked: " + this.id);
}

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