title: Javascript Populated Fields gives Undefined Function Error
body: <p>I am creating a todo app. It consists of 3 task to do with status set to <code>false</code> by default. The fields are populated using Javascript.</p>
  
  <p>When the radio button is checked, it should run the <code>completeTask()</code> function. But it is giving me the undefined function error. Please Help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let todoApp = (() =&gt; {
   const container = document.getElementById('todoLister');
   const todoList = [
    {
     task: 'Get Up',
     status: false
    },
    {
     task: 'Eat stuff',
     status: false
    },  
    {
     task: 'Goto College',
     status: false
    }
   ];
  
   todoList.forEach((el, id) =&gt; {
    const label = document.createElement('label');
    const radio = document.createElement('input');
    const br = document.createElement('br');
  
    if(el.status)
     label.innerText = el.task+'- Done Successfully';
    else
     label.innerText = el.task+'- Not Done';
    
    label.setAttribute('for', el.task);
    radio.value = id;
    radio.setAttribute('type', 'radio');
    radio.setAttribute('onchange', 'completeTask('+id+')');
    container.appendChild(radio);
    container.appendChild(label);
    container.appendChild(br);
   });
  
   let completeTask = (id) =&gt; {
    todoList[id].status = true;
  
    if(todoList[id].status)
     document.getElementsByTagName('label')[id].innerText = 'Done Successfully';
   }
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="todoLister"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>