javascript - 在 innerHTML 中调用一个函数

Question

我需要在 innerHTML 中调用一个函数，这是我的尝试，但它不起作用。

category.find({}, function(err, docs) {
    docs.forEach(function(d) {
          var id = d._id
          document.getElementById('result').innerHTML += '<li onclick=insert(id)>' + d.name + '</li>'
    })
})

function insert(id){
  alert(id + "Inserted")
}

这是 HTML 部分:

<div id="result"></div>

Answer 1

onclick 属性中的变量在全局范围内计算，您不能引用局部变量。您需要将字符串中的 id 替换为 id 变量的实际值。您可以使用模板文字执行此操作。

const docs = [{
  id: "FgrbV2NTp72ie6xj",
  name: "Joe"
}, {
  id: "agfadsfasdfq23",
  name: "Fred"
}];

docs.forEach(function(d) {
  document.getElementById('result').innerHTML += `<li onclick="insert('${d.id}')">${d.name}</li>`
});

function insert(id) {
  alert(id + " Inserted")
}

<ul id="result"></ul>