PHP动态输出onclick事件调用JS函数报SyntaxError错误如何解决？

问题原因 #

报错是HTML属性引号和JS字符串引号嵌套冲突导致的：
你在PHP输出的onclick属性用双引号包裹，内部setProduct的参数又用了双引号，渲染到页面后双引号提前闭合，浏览器会把onclick的属性值识别为setProduct(，后续内容变成无效属性，直接触发JS语法解析错误。

修复方案 #

方案1：转义单引号包裹参数（快速适配） #

把setProduct的参数改用单引号包裹，由于PHP echo当前用单引号作为字符串边界，需要用反斜杠转义单引号：

// 只需要修改循环内的echo语句即可
echo '<div class="popularProduct" onclick="setProduct(\''.$product_code.'\')">'.$product_code.'</div>';

渲染后生成的HTML就是你测试可正常运行的格式：

<div class="popularProduct" onclick="setProduct('PROD123')">PROD123</div>

方案2：用json_encode处理参数（兼容特殊字符，更安全） #

如果产品编码中可能包含单引号、双引号、空格或其他特殊符号，直接拼接字符串仍有可能出现语法问题，用json_encode自动处理转义更稳妥：

echo '<div class="popularProduct" onclick="setProduct('.htmlspecialchars(json_encode($product_code), ENT_QUOTES).')">'.$product_code.'</div>';

这里加htmlspecialchars(..., ENT_QUOTES)是为了把JSON输出中的引号转为HTML实体，避免和外层HTML属性的引号冲突，不管产品编码包含什么特殊字符都可以正常传递给JS函数。

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