我正在尝试使用 1-3-5 规则制作待办事项列表，因此我创建了三个 html 表单并希望将它们存储在三个不同的数组中。但是我的.ejs文件好像只能访问task数组，不能识别task3和task5。
当我运行代码时，浏览器返回:未定义 task3。 我不知道为什么，请帮忙!谢谢!
index.js( Controller )
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
//render css files
app.use(express.static("public"));
//placeholders for added task
var task = [];
var task3 = [];
var task5 = [];
//placeholders for removed task
var complete = [];
//post route for adding new task
app.post("/addtask", function(req, res) {
var newTask = req.body.newtask;
task.push(newTask);
res.redirect("/");
});
app.post("/addtask3", function(req, res) {
var newTask = req.body.newtask3;
task3.push(newTask);
res.redirect("/");
});
app.post("/addtask5", function(req, res) {
var newTask = req.body.newtask5;
task5.push(newTask);
res.redirect("/");
});
app.post("/completetask", function(req, res) {
var completeTask = req.body.check;
//check for the "typeof" the different completed task, then add into the complete task
if (typeof completeTask === "string") {
complete.push(completeTask);
//check if the completed task already exits in the task when checked, then remove it
task.splice(task.indexOf(completeTask), 1);
} else if (typeof completeTask === "object") {
for (var i = 0; i < completeTask.length; i++) {
complete.push(completeTask[i]);
task.splice(task.indexOf(completeTask[i]), 1);
}
}
res.redirect("/");
});
app.post("/removetask", function(req, res) {
var removeTask = req.body.check;
//check for the "typeof" the different completed task, then add into the complete task
if (typeof removeTask === "string") {
task.splice(task.indexOf(removeTask), 1);
} else if (typeof removeTask === "object") {
for (var i = 0; i < removeTask.length; i++) {
task.splice(task.indexOf(removeTask[i]), 1);
}
}
res.redirect("/");
});
//render the ejs and display added task, completed task
app.get("/", function(req, res) {
res.render("index", { task: task, complete: complete });
});
//set app to listen on port 3000
app.listen(3000, function() {
console.log("server is running on port 3000");
});
index.ejs(查看器)
<html>
<head>
<title> ToDo App </title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1> ToDo List </h1>
<h2> 1 Big Thing </h2>
<form method="POST">
<p />
<input type="text" name="newtask" placeholder="add big task">
<button formaction="/addtask"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task.length; i++){ %>
<li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li>
<% } %>
<h2> 3 Medium Things </h2>
<p />
<input type="text" name="newtask3" placeholder="add medium task">
<button formaction="/addtask3"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task3.length; i++){ %>
<li><input type="checkbox" name="check" value="<%= task3[i] %>" /> <%= task3[i] %> </li>
<% } %>
<h2> 5 Small Things </h2>
<p />
<input type="text" name="newtask5" placeholder="add small task">
<button formaction="/addtask5"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
</form>
<% for( var i = 0; i < task5.length; i++){ %>
<li><input type="checkbox" name="check" value="<%= task5[i] %>" /> <%= task5[i] %> </li>
<% } %>
<h2> Completed task </h2>
<% for(var i = 0; i < complete.length; i++){ %>
<li><input type="checkbox" checked><%= complete[i] %> </li>
<% } %>
</div>
</body>
</html>
最佳答案
您的问题在于您发送给 View 的内容
app.get("/", function(req, res) {
res.render("index", { task: task, complete: complete });
});
你看到了吗？您正在渲染 View 索引，将两个对象传递给它，task 和 complete。然后，在您看来，您尝试访问 task3，但您从未发送过它。为了让您的代码运行，您应该将此行更改为
app.get("/", function(req, res) {
res.render("index", { task: task, task3: task3, task5: task5, complete: complete });
});
或者这个，如果你使用的是现代版本的 Node
app.get("/", function(req, res) {
res.render("index", { task, task3, task5, complete });
});
关于javascript - 我在我的index.js文件里定义了三个数组，但是我的index.ejs文件只能识别第一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53413118/