WordPress模板中JavaScript未捕获语法错误问题求助

问题分析 #

你遇到的Uncaught SyntaxError: unexpected token: identifier错误，根源是WordPress模板对HTML实体的解析冲突+JS字符串拼接时的引号混乱：

• 你写的$toto = "][3d-flip-book]";里的"是HTML转义后的双引号，WordPress渲染页面时，可能没有正确还原成JS能识别的原生双引号，直接导致变量定义的语法错误；
• 手动加转义符时，又容易因为引号嵌套逻辑混乱，触发$toto未定义的新问题。

修复方案 #

优先用ES6的模板字符串（反引号`包裹）拼接内容，彻底规避引号冲突问题，同时代码可读性更强。另外建议用let/const声明变量，避免全局变量污染。

修复后的完整代码

function run() {
  const selValue = document.getElementById("Ultra").value;
  const flipbookPopup = `[3d-flip-book id=${selValue}][3d-flip-book]`;
  document.getElementById("srt").value = flipbookPopup;
}

<select id="Ultra" onchange="run()">
  <option value="0">Select</option>
  <option value="16">text1</option>
  <option value="17">text2</option>
  <option value="18">text3</option>
</select><br><br> TextBox1
<br>
<input type="text" id="srt" placeholder="get value on option select"><br>

备选方案（传统拼接写法） #

如果一定要用传统字符串拼接，需确保JS里的引号不被WordPress错误转义，写法如下：

function run() {
  let selValue = document.getElementById("Ultra").value;
  let toto = "][3d-flip-book]";
  let flipbookPopup = "[3d-flip-book id=" + selValue + toto;
  document.getElementById("srt").value = flipbookPopup;
}

（注：这种写法需要保证WordPress渲染时，JS代码里的双引号不会被强制转义为HTML实体，推荐优先使用模板字符串方案）

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