javascript - 错误表示意外的语法错误是意外的，并且未定义多个 HTML onclick 事件
问题描述
所以我正在做我的任务，明天到期（这是扩展方面）。单击按钮时出现两个错误：
未捕获的 ReferenceError：列表未在 HTMLButtonElement.onclick 中定义
我拥有的所有功能都会发生这种情况。第二个错误是这样的：
未捕获的 SyntaxError：输入意外结束
显然这个错误就是这个</script>标签。
我尝试过更改代码、函数等，但似乎没有任何改变。
<body>
<div id="navbar">
<nav class="navbar navbar-inverse">
<a href="/form.html">Tasks</a>
<a href="/dbform.html">DB Tasks</a>
<ul class-"nav navbar-nav">
<li>
<a href="/">Home Page</a>
</li>
<li>
<a href="/welcome">Welcome!</a>
</li>
<li>
<a href="list">List of tasks!</a>
</li>
</ul>
</nav>
</div>
<h1>To Do List</h1>
<h2>List your tasks</h2>
<button onclick="list()">List all tasks</button>
<h2>Add a task</h2>
<p>
<input type="text" placeholder="Task ID" id="taskId">
<input type="text" placeholder="Task Description" id="taskDesc">
<input type="button" value="Add task" onclick="addTask()">
</p>
<h2>Delete a task</h2>
<p>
<input type="text" placeholder="Task ID" id="taskId2">
<input type="button" value="Delete task" onclick="deleteTask()">
</p>
<h2>Show your tasks in a table</h2>
<p>
<button onclick="makeTable()">Table To Do List</button>
<table id="makeTable" border="1">
<thead>
<tr>
<th align="left">ID</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</p>
<p id="msg"> </p>
<script>
/*
This links the list from server.js to form.html.The fetch is used to fetch the localhost:3000/list
link so all tasks can be displayed.
*/
async function list() {
let response = await fetch('/tasks', {
method: 'GET',
headers: {
"Content-Type": "application/json"
}
});
let jsonPayload = await response.json();
var data = document.getElementById("msg");
data.innerHTML = JSON.stringify(jsonPayload);
}
/*
This fetch(url) utilises the /add url so the textboxes essentially do the same thing
as the /add?id=<number>&desc=<string>, so when the add task button is clicked, a task is added.
*/
function addTask() {
var url = "/tasks";
//Puts all values inside the object.
var data = {
"id": taskId,
"desc": taskDesc,
}
//This fetch requests take the url /tasks and fetches it using the POST method, which creates the tasks.
fetch(url, {
method: "POST",
//The url tasks which is fetched with POST method uses req.bodyParser to get the data, so the data object - containing the information about the task, has been converted to JSON.
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
})
/*
This utilises the /delete url in the localhost website. It is like the add task button, except instead of
doing the same thing as /add it does /delete. The fetch url "fetches" the /delete url.
*/
function deleteTask() {
//the variable "taskId", is the number submitted in the text box to delete the selected task.
var taskId = document.getElementById("taskId2").value;
//the url that is fetched with the taskId variable which deletes the function.
var url = "/tasks/"+taskId;
//fetches /tasks with the DELETE method
fetch(url, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
}
});
//display(); calls the display function to list the tasks again without the deleted tasks
display();
}
async function makeTable() {
let response = await fetch("http://localhost:3000/list");
let data = await response.json();
let tableBody = document.getElementById("tableBody");
for (var i = data.length - 1; i > -1; i--) {
let row = tableBody.insertRow(0);
let col1 = row.insertCell(0);
let col2 = row.insertCell(1);
col1.innerHTML = data[i].id;
col2.innerHTML = data[i].desc;
}
}
</script>
</body>
</html>
错误是：
未捕获的 ReferenceError：列表未在 HTMLButtonElement.onclick 中定义
解决方案
看了整件事......不是很格式化，因为我很快就完成了，但这似乎消除了一些错误：
<html>
<body>
<div id="navbar">
<nav class="navbar navbar-inverse">
<a href="/form.html">Tasks</a>
<a href="/dbform.html">DB Tasks</a>
<ul class-"nav navbar-nav">
<li>
<a href="/">Home Page</a>
</li>
<li>
<a href="/welcome">Welcome!</a>
</li>
<li>
<a href="list">List of tasks!</a>
</li>
</ul>
</nav>
</div>
<h1>To Do List</h1>
<h2>List your tasks</h2>
<button onclick="list()">List all tasks</button>
<h2>Add a task</h2>
<p>
<input type="text" placeholder="Task ID" id="taskId">
<input type="text" placeholder="Task Description" id="taskDesc">
<input type="button" value="Add task" onclick="addTask()">
</p>
<h2>Delete a task</h2>
<p>
<input type="text" placeholder="Task ID" id="taskId2">
<input type="button" value="Delete task" onclick="deleteTask()">
</p>
<h2>Show your tasks in a table</h2>
<p>
<button onclick="makeTable()">Table To Do List</button>
<table id="makeTable" border="1">
<thead>
<tr>
<th align="left">ID</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</p>
<p id="msg"> </p>
<script>
/*
This links the list from server.js to form.html.The fetch is used to fetch the localhost:3000/list
link so all tasks can be displayed.
*/
async function list() {
let response = await fetch('/tasks', {
method: 'GET',
headers: {
"Content-Type": "application/json"
}
});
let jsonPayload = await response.json();
var data = document.getElementById("msg");
data.innerHTML = JSON.stringify(jsonPayload);
}
/*
This fetch(url) utilises the /add url so the textboxes essentially do the same thing
as the /add?id=<number>&desc=<string>, so when the add task button is clicked, a task is added.
*/
function addTask() {
var url = "/tasks";
//Puts all values inside the object.
var data = {
"id": taskId,
"desc": taskDesc,
}
//This fetch requests take the url /tasks and fetches it using the POST method, which creates the tasks.
fetch(url, {
method: "POST",
//The url tasks which is fetched with POST method uses req.bodyParser to get the data, so the data object - containing the information about the task, has been converted to JSON.
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
})
/*
This utilises the /delete url in the localhost website. It is like the add task button, except instead of
doing the same thing as /add it does /delete. The fetch url "fetches" the /delete url.
*/
function deleteTask() {
//the variable "taskId", is the number submitted in the text box to delete the selected task.
var taskId = document.getElementById("taskId2").value;
//the url that is fetched with the taskId variable which deletes the function.
var url = "/tasks/"+taskId;
//fetches /tasks with the DELETE method
fetch(url, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
}
});
//display(); calls the display function to list the tasks again without the deleted tasks
display();
}
async function makeTable() {
let response = await fetch("http://localhost:3000/list");
let data = await response.json();
let tableBody = document.getElementById("tableBody");
for (var i = data.length - 1; i > -1; i--) {
let row = tableBody.insertRow(0);
let col1 = row.insertCell(0);
let col2 = row.insertCell(1);
col1.innerHTML = data[i].id;
col2.innerHTML = data[i].desc;
}
}
}
</script>
</body>
</html>
对不起，混乱...告诉我这是否有效我在基本的 HTML 查看器中尝试过，所以我不知道它是否有效:)
推荐阅读
- java - Java Swing 监听器
- vba - MS Word table -macro 查找包含特定文本的行，然后将整行移动到表中的最后一行
- database - Laravel 身份验证是否接受可为空的列？
- python - 如何将列表的各个元素添加到python中的另一个列表中？
- python - 使用 Pycharm (pyodbc) 连接到 SQL Server 数据库
- reactjs - 在移动设备上选择 NavItem 时，导航不会折叠
- jenkins - Jenkins Pipeline checkout and build on remote Docker host from Bitbucket commit
- java - T 类型的Java泛型集合，添加会引发编译错误，但检索和添加不会
- android - 如何在 Android 上使用 Kotlin 获取 Dagger 2 模块中的组件依赖项？
- symfony - 序列化和编码有什么区别？