点击Edit按钮报Uncaught SyntaxError: Unexpected end of input错误如何解决

错误原因 #

• 核心问题是Edit按钮的onclick事件属性引号嵌套冲突，你在双引号包裹的innerHTML字符串中，onclick属性用了单引号声明，属性内部的location.href值又再次使用了单引号，直接截断了onclick的属性值，导致浏览器解析HTML和JS时出现语法断裂，最终抛出意外输入终止的错误。
• 报错指向</script>标签是因为语法断裂后，浏览器无法正确识别script块的结束边界，误以为代码没写完就到了闭合标签。

修复方案 #

两种可选实现方式：

1. 快速修复：转义内层嵌套的引号，把onclick的属性包裹符改为转义后的双引号\"，避免嵌套冲突。
2. 更规范的优化写法：避免在字符串拼接的HTML里写内联事件，改用事件委托或者生成DOM元素后单独绑定事件，从根源避免引号嵌套问题。

修复后的可运行代码如下：

<body>
    <header>
        ...
    </header>
    <label id="carrello">Il tuo carrello</label>
    <table id="stampa_piatti">
       ....
    </table>
    <div id="bottone_carrello">
        ....
    </div>
    <script>
        if (sessionStorage.getItem("carrello") === null) {
            document.getElementById("stampa_piatti").innerHTML = "<label><div class = 'carrello_vuoto'>Il tuo carrello è vuoto, " + "<a href = 'C:/Users/Admin/Desktop/FastFood/menu_lista.html'>riempilo</a>!</div></label>";
        } else {
            document.getElementById("bottone_carrello").innerHTML = "<div class = 'bottoni_carrello'><button class='button' onclick='acquisto()'>Procedi all'acquisto</button >" +
                "<button class='button' onclick=\"location.href='file:///C:/Users/Admin/Desktop/FastFood/menu.html';\">Edit carrello</button></div>";
        }
        var t = mostraCarrello();
    </script>
</body>

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