Flask下通过onclick的location.href实现按钮跳转时出现字符串字面量报错

报错原因 #

原代码的引号嵌套逻辑完全冲突，直接把HTML属性截断了：

• 你给onclick属性用单引号当包裹边界
• 属性值里location.href=后面又用了单引号，这个单引号直接成了onclick属性的闭合标记
• 浏览器拿到断裂的代码块，自然会报“未终止字符串字面量”的JS语法错
  你可以对照看渲染后的实际结构，完全不是你预期的JS逻辑：

原代码的引号位置错位：onclick='location.href='{{ url_for('therapist') }}''>...
浏览器识别到的onclick值只有location.href=，后面的URL内容直接被当成了按钮的其他属性，完全脱离了JS代码块。

可直接复用的正确写法 #

写法1：优先推荐的语义化实现 #

完全不用手写JS跳转，用a标签包裹按钮即可，兼容性和稳定性最高，也不会有引号冲突：

<a href="{{ url_for('therapist') }}">
  <button class="therapist-button">Talk with your own personal therapist</button>
</a>

如果觉得a标签默认的下划线样式突兀，给a标签加个text-decoration: none的样式覆盖就行，比写JS跳转动不动出语法错靠谱。

写法2：保留onclick跳转的修正版 #

如果一定要用onclick实现跳转，只要把不同层级的引号错开就行：外层HTML属性用双引号，内层JS字符串用单引号，不要撞同一个引号类型：

<button 
  class="therapist-button" 
  onclick="location.href='{{ url_for('therapist') }}'"
>
  Talk with your own personal therapist
</button>

踩坑注意 #

• 不要把Jinja渲染出来的URL裸放在location.href后面不加引号，浏览器会把URL当成JS变量名解析，照样报语法错
• 如果URL里带查询参数、特殊字符，优先用a标签的原生跳转，浏览器会自动做转义处理，自己写JS跳转还要额外处理特殊字符的兼容问题

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