JS调用函数传参报错：Uncaught SyntaxError: missing ) after argument list

问题根源 #

• 模板字符串语法错误：用单引号包裹innerHTML内容时，${index}会被当作普通文本输出，最终生成的onclick代码是mytask(${index})，浏览器无法解析这种无效语法，导致括号缺失错误。
• 索引未递增：循环内的index++被注释，所有按钮的索引值都固定为0，无法区分不同任务。

修正后的代码 #

fillTask();

function fillTask() {
  tasksList.innerHTML = '';
  let index = 0;
  for (task of tasks) {
    let li = document.createElement('li');
    // 改用反引号包裹模板字符串，直接使用<和>
    li.innerHTML = ` <button onclick="mytask(${index})" class="delete">Delete</button> `;
    tasksList.appendChild(li);
    index++; // 取消注释，让索引随循环递增
  }
}

//Delete task
function mytask(index) {
  alert("Task has been deleted");
}

关键修改说明 #

• 把包裹HTML内容的单引号替换为反引号（），这样ES6模板字符串的变量插值${index}才能正常解析，生成mytask(0)、mytask(1)`这类合法的函数调用代码。
• 取消index++的注释，确保每个任务按钮对应正确的索引值。
• 直接使用<和>代替<和>，反引号包裹的字符串无需转义这些HTML标签符号。

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