Jinja2模板循环生成按钮调用JS报错：无法读取null的addEventListener属性

错误原因 #

1. document.querySelector(".submit-class")仅返回第一个匹配类名的元素，若页面中无该元素（比如items为空时），会返回null，调用addEventListener就会触发Uncaught TypeError。
2. 即使存在多个按钮，当前代码仅会给第一个按钮绑定点击事件，其余按钮无法响应。

解决方案 #

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

使用document.querySelectorAll获取所有匹配的按钮元素，逐个添加事件监听：

window.onload = function() {
    const submitButtons = document.querySelectorAll(".submit-class");
    submitButtons.forEach(button => {
        button.addEventListener("click", function() {
            console.log("liked this product");
        });
    });
};

方案2：事件委托（推荐动态元素场景） #

将事件绑定到按钮的父容器，利用事件冒泡处理点击，适合后续可能动态添加按钮的场景：
首先修改Jinja模板，将按钮放入父容器：

<div class="submit-buttons-container">
{% for item in items %}
<input type="submit" value="Place your Order" class="submit-class" />
{% endfor %}
</div>

然后编写JS代码：

window.onload = function() {
    const container = document.querySelector(".submit-buttons-container");
    if (container) {
        container.addEventListener("click", function(e) {
            if (e.target.classList.contains("submit-class")) {
                console.log("liked this product");
            }
        });
    }
};

方案3：直接在HTML中绑定事件（简单耦合） #

生成按钮时直接添加onclick属性，快速实现功能：

{% for item in items %}
<input type="submit" value="Place your Order" class="submit-class" onclick="handleOrderClick()" />
{% endfor %}

对应的JS函数：

function handleOrderClick() {
    console.log("liked this product");
}

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