Javascript 使用onclick时出现意外的令牌错误

这是我的密码

  const products = productArray.map(product =>
`
<tr>
  <td>${product.id}</td>
  <td>${product.type}</td>
  <td>${product.price}</td>
  <td><button onclick="${() => console.log('hello world')}">Examine</button></td>
</tr>
`
  );
  return tableBody.innerHTML = products.join('');

我只是不明白为什么会出现这个意外的令牌错误，它指向html。我很确定这是一个非常愚蠢的决定，但我就是不知道它在哪里。

---

不能在模板文本中替换函数。它只是插入函数的源代码

在这种情况下也没有什么意义。您可以简单地将函数体放在onclick属性中

  const products = productArray.map(product =>
`
<tr>
  <td>${product.id}</td>
  <td>${product.type}</td>
  <td>${product.price}</td>
  <td><button onclick="console.log('hello world')">Examine</button></td>
</tr>
`
  );
  return tableBody.innerHTML = products.join('');

---

我建议您使用客户端模板引擎来避免此类问题。比如说

但关于修复，请尝试以下方法：

const tableBody=document.getElementById'productsTable'； 常量productArray=[ {id:1，键入'something'，price:100}， {id:2，类型：'samething'，价格：120} ]; const products=PRODUCTARY.mapproduct=> ` ${product.id} ${product.type} ${product.price} 检查 ` ; tableBody.innerHTML=products.join；

---

最后，我使用了这个解决方案，因为另一个较短，所以它很小：

const products = productArray.map(product => {
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');
    const td4 = document.createElement('button');

    td4.addEventListener('click', () =>
      processSearch(product.id)
    );

    td1.appendChild(document.createTextNode(product.id));
    td2.appendChild(document.createTextNode(product.type));
    td3.appendChild(document.createTextNode(product.price));
    td4.appendChild(document.createTextNode('Examine'));
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);

    return tableBody.appendChild(tr);
  });

---

好的，我没有办法添加这个函数，例如：函数clickHere{console.log'hi'}您可以在块中定义函数，然后使用onclick=clickHere。这是使用Javascript函数的正常方式。