跟随Dennis Ivy教程开发电商网站 cart.js报missing ) after argument list错误咨询

报错定位 #

控制台抛出Uncaught SyntaxError: missing ) after argument list是典型的拼写错误触发的语法解析问题，逐行过一遍代码就能定位到3处会直接导致运行失败的问题，按触发报错的优先级排序：

• 关键字拼写错误：绑定点击事件的代码块里，把function错写为funcation。JS解析器遇到这个无效的拼写时，没法正确识别addEventListener方法的参数边界，直接抛出参数列表缺右括号的语法错，这也是报错精准指向当前行的核心原因。
• DOM选择器方法名拼写错误：获取按钮元素的那行代码里，getElementByClassName是浏览器不存在的方法，原生提供的类选择器方法名是getElementsByClassName（Element是复数形式）。不修正的话，这行代码会直接返回undefined，后续循环绑定事件时会触发类型错误，根本找不到要绑定的按钮。
• 变量引用错误：代码里取商品ID时定义的变量名是productId，但控制台打印日志时错写成了未定义的product。就算修正了前面的拼写错误，点击按钮时也会触发变量未定义的运行时报错，拿不到正确的商品ID值。

修正后的可运行代码 #

var updateBtns = document.getElementsByClassName('update-cart')

for (var i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function () {
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'action:', action)
    })
}

兼容说明 #

修正后的代码和页面上的update-cart类按钮完全匹配，也是Dennis Ivy电商教程里的标准购物车前端逻辑——按钮上通过模板渲染的data-product、data-action自定义属性，可以通过this.dataset接口正常读取到对应值，修正拼写后不会出现选择器匹配失效的问题，也能和后续的接口请求逻辑顺利衔接。

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