Javascript 填充字段给出未定义函数错误

Question

我正在创建一个待办事项应用程序。它由 3 个任务组成，状态默认设置为 false。这些字段是使用 Javascript 填充的。

当单选按钮被选中时，它应该运行completeTask()函数。但它给了我未定义的函数错误。请帮忙!

let todoApp = (() => {
	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) => {
		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) => {
		todoList[id].status = true;

		if(todoList[id].status)
			document.getElementsByTagName('label')[id].innerText = 'Done Successfully';
	}
})();

<div id="todoLister">
</div>

Answer 1

由于您的函数位于 todoApp 中，因此它无法在全局范围内使用。您需要将函数和数据移到函数之外，以便全局可见。

const todoList = [{
    task: 'Get Up',
    status: false
  },
  {
    task: 'Eat stuff',
    status: false
  },
  {
    task: 'Goto College',
    status: false
  }
];


let completeTask = (id) => {
  todoList[id].status = true;

  if (todoList[id].status)
    document.getElementsByTagName('label')[id].innerText = 'Done Successfully';
}

let todoApp = (() => {
  const container = document.getElementById('todoLister');


  todoList.forEach((el, id) => {
    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);
  });


})();

<div id="todoLister">
</div>