在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>