“未捕获的语法错误：输入意外结束”无法弄清楚出了什么问题

Question

我对 js 和编程都很陌生，所以我可能在这里遗漏了一些非常明显的东西。我正在尝试创建一个非常基本的剪刀石头布程序。

我的html：

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>
    `
}

<div id="canvas"></div>

每当我按下按钮选择石头、布或剪刀时，没有任何反应，并且控制台上会记录错误。我在网上搜索了解决方案，并通过验证器运行 html 和 javascript，没有发现任何问题。控制台注销的引用将我指向index.html:11:49，但我的html文件中的第11行在第34列结束；所以我完全迷路了。

Answer 1

问题就在这里：

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

让我们看看浏览器如何解析它，只给出这里写的内容，而不是你可能的意思（浏览器不关心这一点）。

onclick

属性显然使用单引号，因为它以

onclick='

开头，因此浏览器将查找下一个单引号来终止该值。它是在

(

之后找到的，所以你有一个属性如下：

onclick='playerChoiceIs('

然后，有一些附加的（无意义的）HTML 属性，后面没有值：

rock')'

当您检查开发工具中的按钮元素时，您也可以看到这一点：

因此，单击按钮时执行的 JavaScript 代码是

playerChoiceIs(

。现在，由于这里有一个左括号，但没有右括号，JavaScript 将无法解析此语句，因为输入字符串突然结束 - 所以你有一个意外的输入结束！

因此，解决方案是对 HTML 属性和 JavaScript 表达式中的字符串使用不同的引号（或者理论上，使用 HTML 实体将内部单引号转义为

'

，但这更难阅读）：

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

当然，其他两个按钮也是如此。

Answer 2

新代码：

const canvas = document.getElementById('canvas'), rps = ['rock', 'paper', 'scissors'], results = ['won!', 'lost. D:', 'tied.'];
let oppIndex, statusIndex;

function init(){
    canvas.innerHTML = `
        <h1>Rock, Paper, Scissors!</h1>
        <p>Make your choice...</p>
        <button onclick="select(0)">Rock</button>
        <button onclick="select(1)">Paper</button>
        <button onclick="select(2)">Scissors</button>`;
}
function select(index) {
    oppIndex = Math.floor(Math.random() * 3);

    statusIndex = (index - oppIndex + 2) % 3;
    canvas.innerHTML = `
        <h1>You ${results[statusIndex]}</h1>
        <h2>You chose ${rps[index]}...</h1>
        <h2>Your opponent ${statusIndex == 2 ? 'also' : ''} chose ${rps[oppIndex]}!</h1>
        <button onclick = 'init();'>Play Again!</button>`;
}
init();

<div id="canvas"></div>