title: How do I pass custom function inside .map function on newly created element?
body: <p>I am populating a <code>&lt;ul&gt;&lt;/ul&gt;</code> with <code>&lt;li&gt;&lt;/li&gt;</code> using <code>fetch</code> method api request.</p>
  
  <p>The ul looks like the code below:</p>
  
  <pre><code>&lt;ul id="todos" class="collection"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The script that populates the todos:</p>
  
  <pre><code>fetch("http://localhost:3000/api/todos")
  .then((resp) =&gt; resp.json())
  .then((data) =&gt; {
    let todos = data;
    return todos.map(todo =&gt; {
      let liTodo = createNode("li");
      liTodo.innerHTML = '&lt;button class="btn-small remove-todo" onclick="' + deleteTodo(`${todo._id}`) + '"&gt;Delete' + '&lt;/button&gt;';
      liTodo.classList.add("collection-item");
      append(ulTodos, liTodo);
  });
  
  function createNode(element) {
    return document.createElement(element); // Create the type of element you pass in the parameters
  }
  
  function append(parent, el) {
    return parent.appendChild(el); // Append the second parameter(element) to the first one
  }
  
  function deleteTodo(id) {
    console.log("deleteTodo function called " + id);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/KdiVO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KdiVO.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Problem:</strong>
  Upon loading the page and checking <code>console</code>, I can see that <code>deleteTodo()</code> function is invoked even though I did not click it. </p>
  
  <p>Do you know how can I properly pass the <code>deleteTodo()</code> with the <code>id</code> <strong>only</strong> when it is clicked?</p>
  
  <p>Any help is greatly appreciated. Thanks.</p>