JavaScript报错Uncaught SyntaxError: Unexpected end of input求助

嘿，这个语法错误我太眼熟了！问题根源出在引号嵌套冲突上，咱们一步步拆解来看：

你的代码里，onclick属性用了单引号包裹函数调用：

<img src='upvote-normal.png' onclick='vote('upvote', 1);' style='width: 50px'>

当浏览器解析到vote(后面的'时，会误以为这是onclick属性值的结束引号，剩下的upvote', 1);'就成了无意义的乱码，直接触发了Unexpected end of input（输入意外结束）的语法错误。

两种快速修复方案： #

1. 更换外层引号为双引号，内层保留单引号：

<img src='upvote-normal.png' onclick="vote('upvote', 1);" style='width: 50px'>

2. 转义内层单引号，用\'告诉浏览器这是字符串内容而非结束标记：

<img src='upvote-normal.png' onclick='vote(\'upvote\', 1);' style='width: 50px'>

更推荐的写法（解耦HTML与JS） #

把事件处理逻辑从HTML属性里抽离出来，用JavaScript添加事件监听，这样不仅能避免这类引号问题，代码也更易维护：

<img id="upvoteButton" src='upvote-normal.png' style='width: 50px'>

<script>
// 获取元素
const upvoteBtn = document.getElementById('upvoteButton');
// 添加点击事件
upvoteBtn.addEventListener('click', function() {
  vote('upvote', 1);
});
</script>

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