javascript - Javascript 填充字段给出未定义的函数错误
问题描述
我正在创建一个待办事项应用程序。它由 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>
解决方案
使用您的函数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>
推荐阅读
- terraform - Terraform Vm Provision 附加 2 NIC
- python - 计算列中出现的频率
- ssl - 无法在 apache 2.4 服务器上激活文本压缩
- javascript - 在 OnStart() 函数中更新变量的值
- javascript - Flexbox 页脚在移动设备上未正确定位
- python - 如何修复 Python 的 vk_api 中的“'int' object is not subscriptable”错误
- ios - 这些常量在对齐工具中意味着什么?
- java - JLabel 不会在课堂上显示图像
- javascript - 单击发布链接以在另一页面上显示完整结果
- android - 在 Android 中迁移到最新的 Google Drive API 时出错 - 已超出未经验证使用的每日限制。继续使用需要注册