传递Jinja变量至onclick函数时出现Uncaught SyntaxError报错求助

错误根源是字符串参数未加引号：Jinja渲染后，{{gerecht.gerecht}}会直接输出菜品名称的原始文本。如果菜品名包含空格（比如"Spaghetti Bolognese"），生成的JS代码会变成addItemToCart(Spaghetti Bolognese, 12.99)——这里的空格会被解析成参数分隔符，导致JS认为你传递了多个参数，最终触发括号不匹配的语法错误。

基础修正方案 #

给字符串参数添加单引号，确保JS能正确识别为单个字符串参数：

<button class="button" onclick="addItemToCart('{{gerecht.gerecht}}', {{gerecht.prijs}})" style="cursor: pointer"><span>Voeg toe aan winkelwagen</span> </button>

进阶处理（应对含特殊字符的菜品名） #

如果菜品名可能包含单引号（比如"Joe's Special Pizza"），直接加单引号会再次触发语法错误，需要用Jinja的escape过滤器转义特殊字符：

<button class="button" onclick="addItemToCart('{{gerecht.gerecht|escape}}', {{gerecht.prijs}})" style="cursor: pointer"><span>Voeg toe aan winkelwagen</span> </button>

或者改用双引号包裹参数，同时转义内部的双引号：

<button class="button" onclick='addItemToCart("{{gerecht.gerecht|escape}}", {{gerecht.prijs}})' style="cursor: pointer"><span>Voeg toe aan winkelwagen</span> </button>

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