call a function inside innerHTML

Question

I need to call a function inside innerHTML and this is my try but it doesn't work.

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")
}

Here is the HTML Part:

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

@ A. El-zahaby your code also work, thanks ^^ – zippax Mar 09 '19 at 23:15 — zippax, Mar 09 '19 at 23:15

Barmar · Accepted Answer · 2019-03-09T23:12:18.457

5

Variables in onclick attributes are evaluated in the global scope, you can't refer to local variables. You need to replace id in the string with the actual value of the id variable. You can do this with a template literal.

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>

edited Mar 09 '19 at 23:12

answered Mar 09 '19 at 22:52

Barmar

669,327
51
454
560

It gave me undefined – zippax Mar 09 '19 at 22:58
It works in my snippet, you must be doing something wrong. – Barmar Mar 09 '19 at 22:59
What datatype is `d.id`? If it's a string you'll need to quote it. – Barmar Mar 09 '19 at 23:00
sorry it work on log: Uncaught ReferenceError: FgrbV2NTp72ie6xj is not defined at HTMLLIElement.onclick (index.html:1) – zippax Mar 09 '19 at 23:02
My original code assumed that `id` was a number, not a string, but I fixed it. – Barmar Mar 09 '19 at 23:11
Yes, I just copy it as it is – zippax Mar 09 '19 at 23:11
What was the problem? – Barmar Mar 09 '19 at 23:13
the problem was _id instead of id – zippax Mar 15 '19 at 18:33

slevy1 · Answer 2 · 2019-03-11T15:54:31.393

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;
}

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

While innerHTML is easy to use, according to a discussant here:

...in general, .innerHTML is for small fragments of HTML to be inserted and parsed into a document ..

So, instead of solving the OP's query with respect to innerHTML, this solution purposefully avoids it by utilizing DOM manipulation and at the same time makes the desired function available as a handler for an onclick event of an <LI> element. To achieve this end, the code creates a document fragment object. As a result the code is able to add the LI elements as well as the id of each one and set the onclick event-property of each in a function invoked by the docs.forEach(). Also, I added some CSS to enhance the cursor when user clicks "Joe" or "Fred".

call a function inside innerHTML

2 Answers2