在未定义的变量上的javascript中获取未捕获的引用错误.我不知道为什么
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在未定义的变量上的javascript中获取未捕获的引用错误.我不知道为什么，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8242字，纯文字阅读大概需要12分钟。
内容图文
我的问题来自尝试从tasker_matic.js文件添加新任务时出现的问题.在tasker.js文件中,出现以下错误：
tasker.js:196 Uncaught ReferenceError: task is not defined
at Object.add (tasker.js:196)
at addTask (tasker_matic.js:157)
at HTMLInputElement.onclick (tasker.html?username=smaug&password=dragon:42)
同样,我不知道为什么会收到此错误.现在,我可以对tasker.js进行任何更改.
这是代码的相关部分：
tasker_matic.js：
function addTask() {
let task = {};
let description = document.getElementById('descField').value;
let time = document.getElementById('dField').value;
let colorCode = document.getElementById('cField').value;
task.desc = description;
task.due = time;
task.color = colorCode;
tasker.add(userId, task, (err, task) => {
if (err) {
alert('Broken');
}
});
}
tasker.js：
let tasker = (function () {
let verbs = [
"make",
"install",
"update",
"generate data for",
"talk to",
"schedule a time for",
"develop a plan for",
"knit",
"create",
"build",
"write",
"get",
"finish",
"call",
"arrange",
"submit",
"talk to",
"do",
"protest",
"collect",
"shop for"
];
let nouns = [
"a cake",
"the boat",
"our wedding",
"the garage",
"the tow truck",
"our shed",
"1090 tax form",
"the IRS agent",
"milk",
"some LED lights",
"monthly budget",
"marketing plan",
"the flowers",
"an albatross"
];
let userNames = [
"frodo baggins",
"gandalf gray",
"smaug dragon"
];
let Task = function (id, ownerId, desc, due, color, complete) {
this.ownerId = ownerId;
this.desc = desc;
this.due = due;
this.color = color;
this.complete = complete;
this.id = id || randomId();
};
let randomId = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
let randomColor = function () {
let pad = function (v) {
return v.length == 1 ? '0' + v : v;
}
r = Math.floor(Math.random() * 256).toString(16);
g = Math.floor(Math.random() * 256).toString(16);
b = Math.floor(Math.random() * 256).toString(16);
return '#' + pad(r) + pad(g) + pad(b);
}
let randomDate = function () {
year = Math.floor(Math.random() * 14 + 2010);
month = Math.floor(Math.random() * 12);
day = Math.floor(Math.random() * 31);
return new Date(year, month, day);
};
let choose = function (things) {
let i = Math.floor(Math.random() * things.length);
return things[i];
}
let randomDescription = function () {
return choose(verbs) + ' ' + choose(nouns);
};
let makeList = function (ownerId, n) {
result = [];
for (i = 0; i < n; i += 1) {
result.push(new Task(null,
ownerId,
randomDescription(),
randomDate(),
randomColor(),
choose([true, false])));
}
return result;
}
let updateTask = function( oldTask, editedTask ) {
let propertiesToCopy = ['desc', 'due', 'color', 'complete' ];
propertiesToCopy.forEach( prop => {
if( editedTask.hasOwnProperty( prop ) ) {
oldTask[prop] = editedTask[prop];
}
});
}
let state = {
users: userNames.reduce(function (acc, cv) {
let parts = cv.split(' '); //
let name = parts[0];
let email = parts[0][0] + parts[1] + '@uwlaxer.edu';
let id = randomId();
let password = parts[1];
let tasks = makeList(id, Math.random() * 50 + 20).reduce((acc, t) => { acc[t.id] = t; return acc; }, {});
acc[id] = {
name: name,
email: email,
id: id,
password: password,
tasks: tasks
};
return acc;
}, {}),
user: null
};
let getTask = function (ownerId, id) {
try {
return state.users[ownerId].tasks[id];
} catch (e) {
return null;
}
}
let getUserByName = function (name) {
for (id in state.users) {
if (state.users[id] && state.users[id].name === name) {
return state.users[id];
}
}
return null;
}
let taskList = function (ownerId) {
let result = [];
for (let tid in state.user.tasks) {
result.push(state.user.tasks[tid]);
}
return result.sort((a, b) => b.due.getTime() - a.due.getTime());
}
let respond = function (error, value, cb) {
window.setTimeout(() => cb(error, value), Math.random() * 1500);
}
let copyTask = function( task ) {
return new Task(task.id, task.ownerId, task.desc, task.due, task.color, task.complete);
}
return {
login: function ( username, passwd, cb) {
let user = getUserByName( username );
if (user && user.password === passwd) {
state.user = user;
let cleansedUser = { name: user.name, email: user.email, id: user.id };
respond(null, cleansedUser, cb);
} else {
respond('forbidden', null, cb);
}
},
logout: function (cb) {
state.user = null;
respond(null, true, cb);
},
tasks: function (ownerId, cb) {
if (ownerId === state.user.id) {
let tasks = taskList(ownerId).map(u => new Task(u.id, u.ownerId, u.desc, u.due, u.color, u.complete));
respond(null, tasks, cb);
} else {
respond('forbidden', null, cb);
}
},
add: function (ownerId, task, cb) {
if (state.user.id == ownerId) {
if (task.desc && task.due && task.color) {
let due = new Date(task.due);
let task = new Task(task.id, ownerId, task.desc, due, task.color, Boolean(task.complete));
state.users[ownerId].tasks[task.id] = task;
respond(null, task, cb);
} else {
respond('invalid task', null, cb);
}
} else {
respond('forbidden', null, cb);
}
},
delete: function (ownerId, taskId, cb) {
if (state.user.id === ownerId) {
let task = state.users[ownerId].tasks[taskId];
delete state.users[ownerId].tasks[taskId];
if (task) {
respond(null, task, cb);
} else {
respond('no such task', null, cb);
}
} else {
respond('forbidden', null, cb);
}
},
edit: function (ownerId, taskId, task, cb) {
if (state.user.id == ownerId) {
if (taskId) {
let oldTask = getTask(ownerId, taskId);
if( oldTask) {
updateTask( oldTask, task );
respond( null, copyTask( oldTask ), cb );
} else {
respond( 'no such task', null, cb );
}
} else {
respond( 'no such task', null, cb );
}
} else {
respond( 'forbidden', null, cb );
}
}
}
})();
tasker.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Tasker</title>
<link rel="stylesheet" href="tasker_matic.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="tasker.js"></script>
<script src="tasker_matic.js"></script>
</head>
<body>
<div class="container">
<div id="login" class="on">
<h1>Login</h1><br>
<form style="width:50%">
<input id="usernameInput" type="text" name="username" placeholder="Username" class="form-control">
<input id="passwordInput" type="password" name="password" placeholder="Password" class="form-control">
<input type="submit" value="Login" class="btn btn-primary pull-right" onclick="login(event)">
</form>
</div>
<div id="home" class="off">
<h1>Tasker <small><span class="pull-right btn btn-primary btn-sm" id="logout" onclick="logout()"></span></small></h1>
<div class="well well-sm">
<form class="form-inline">
<div class="form-group">
<label for="descField">Description</label>
<input class="form-control" type="text" placeholder="Description" id="descField">
</div>
<div class="form-group">
<label for="cField">Color Code</label>
<input class="form-control" type="color" id="cField"/>
</div>
<div class="form-group">
<label for="dField">Due Date</label>
<input class="form-control" type="date" id="dField"/>
</div>
<input class="form-control" type="button" value="+" id="addButton" onclick="addTask()"/>
</form>
</div>
<div class="well well-sm">
<form class="form-inline">
<input class="form-control" type="text" placeholder="search" id="searchField" style="width:25%" onkeyup="searchTextChange()"/>
<div class="checkbox">
<label>
<input type="checkbox" id="incompleteBox" onclick="incompleteChange()"/>Incomplete Only
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="overdueBox" onclick="overdueChange()"/>Over-due only
</label>
</div>
</form>
</div>
<table id="tasks" class="table table-striped">
</table>
</div>
</div>
</body>
</html>
解决方法:
Abana的答案确定了问题所在,因此我将继续解释为什么它不起作用.
当使用let时,类似于var,变量声明被提升到作用域的顶部.不同之处在于,它还会创建一个临时死区(TDZ),在此期间任何访问变量的尝试都将引发错误.
现在查看代码,因为您以let任务开始该行,所以它将在该块的作用域内创建一个新变量,但是TDZ一直持续到该行执行完毕为止.
当要创建新任务时,它将在TDZ期间访问内部作用域任务,并引发错误.
解决方案是使用其他变量名称：
add: function (ownerId, task, cb) {
if (state.user.id == ownerId) {
if (task.desc && task.due && task.color) {
let due = new Date(task.due);
let innerTask = new Task(task.id, ownerId, task.desc, due, task.color, Boolean(task.complete));
state.users[ownerId].tasks[task.id] = innerTask;
respond(null, innerTask, cb);
} else {
respond('invalid task', null, cb);
}
} else {
respond('forbidden', null, cb);
}
},
内容总结
以上是互联网集市为您收集整理的在未定义的变量上的javascript中获取未捕获的引用错误.我不知道为什么全部内容，希望文章能够帮你解决在未定义的变量上的javascript中获取未捕获的引用错误.我不知道为什么所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】