在 innerHTML 中调用函数答案

【问题标题】：call a function inside innerHTML在 innerHTML 中调用函数
【发布时间】：2019-07-31 15:19:16
【问题描述】：

我需要在 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>

【问题讨论】：

d._id 是一个数字吗？
试试这个：'<li onclick=\'insert("' + id + '")\'>' + d.name + '</li>'
@A. El-zahaby 你的代码也可以工作，谢谢^^

标签： javascript loops innerhtml

【解决方案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")
}

&lt;ul id="result"&gt;&lt;/ul&gt;

【讨论】：

它给了我未定义
它在我的 sn-p 中有效，你一定是做错了什么。
d.id 是什么数据类型？如果它是一个字符串，你需要引用它。
抱歉它在日志上工作：未捕获的 ReferenceError: FgrbV2NTp72ie6xj 未在 HTMLLIElement.onclick (index.html:1) 中定义
我的原始代码假定id 是一个数字，而不是一个字符串，但我修复了它。

【解决方案2】：

const docs = [{
  id: "FgrbV2NTp72ie6xj",
  name: "Joe"
}, {
  id: "agfadsfasdfq23",
  name: "Fred"
}];
let d = document;
d.g = d.getElementById;
let res = d.g('result');

let fragment = new DocumentFragment();
let el = null;
docs.forEach(function(item) {
  el = document.createElement('li');
  el.innerText = `${item.name}`;
  el.onclick = function(){
     alert(`${item.id}` + " Inserted");
  };
  fragment.appendChild(el);
});

res.appendChild(fragment);

ul{
cursor:default;
}

&lt;ul id="result"&gt;&lt;/ul&gt;

虽然innerHTML 易于使用，但根据讨论者here 的说法：

...一般来说，.innerHTML 用于 HTML 的小片段插入并解析到一个文档中..

因此，该解决方案不是解决 OP 对 innerHTML 的查询，而是通过利用 DOM 操作有目的地避免它，同时使所需的函数可用作

元素的 onclick 事件的处理程序.为了达到这个目的，代码创建了一个document fragment object。因此，代码能够添加 LI 元素以及每个元素的 id，并在docs.forEach() 调用的函数中设置每个元素的 onclick 事件属性。另外，当用户单击“Joe”或“Fred”时，我添加了一些 CSS 来增强光标。

【讨论】：