JS报错Uncaught SyntaxError: Unexpected end of input，求排查剪刀石头布程序问题

问题根源 #

你遇到的Uncaught SyntaxError: Unexpected end of input错误，是因为动态生成按钮时onclick属性的引号嵌套冲突。

在你的代码里，模板字符串中onclick用单引号包裹，同时函数参数也用了单引号：

<button onclick='playerChoiceIs('Rock')'>Rock</button>

浏览器解析到playerChoiceIs(后面的'时，会误以为onclick的属性值已经结束，剩下的Rock')'就成了无效的HTML语法，导致按钮点击无响应，同时抛出语法错误。

修复方案 #

有两种方式可以解决这个引号冲突问题：

方案1：替换外层引号为双引号

把onclick的外层单引号改成双引号，内部参数保留单引号：

const canvas = document.getElementById('canvas');
let playerChoice;
let oppChoice;
const rps = ['Rock', 'Paper', 'Scissors']

canvas.innerHTML = `
    <h1>Rock, Paper, Scissors!</h1>
    <p>Make your choice...</p>
    <button onclick="playerChoiceIs('Rock')">Rock</button>
    <button onclick="playerChoiceIs('Paper')">Paper</button>
    <button onclick="playerChoiceIs('Scissors')">Scissors</button>
`

function playerChoiceIs(x) {
    playerChoice = x;
    oppChoice = rps[Math.floor(Math.random() * 3)];
    console.log('function called');
    canvas.innerHTML = `
        <h1>You chose ${playerChoice}...</h1>
        <h1>Your opponent chose ${oppChoice}!</h1>
    `
}

方案2：转义内部单引号

用反斜杠\转义函数参数里的单引号，让浏览器识别为字符串的一部分：

const canvas = document.getElementById('canvas');
let playerChoice;
let oppChoice;
const rps = ['Rock', 'Paper', 'Scissors']

canvas.innerHTML = `
    <h1>Rock, Paper, Scissors!</h1>
    <p>Make your choice...</p>
    <button onclick='playerChoiceIs(\'Rock\')'>Rock</button>
    <button onclick='playerChoiceIs(\'Paper\')'>Paper</button>
    <button onclick='playerChoiceIs(\'Scissors\')'>Scissors</button>
`

function playerChoiceIs(x) {
    playerChoice = x;
    oppChoice = rps[Math.floor(Math.random() * 3)];
    console.log('function called');
    canvas.innerHTML = `
        <h1>You chose ${playerChoice}...</h1>
        <h1>Your opponent chose ${oppChoice}!</h1>
    `
}

额外说明 #

1. 你之前在模板字符串里用的<和>是多余的，模板字符串支持直接书写<和>符号，浏览器会正常解析。
2. 控制台报错行号和实际文件行号不符，是因为错误出在动态生成的HTML内容里，控制台指向的是生成后DOM节点对应的行号，而非原JS代码的行号。遇到这类问题时，可以打开浏览器开发者工具的「Elements」面板，查看生成后的HTML结构，就能快速定位语法问题。

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