在prototype中将Javascript数组设置为null
我正在学习javascript，并通过制作一个简单的图书列表应用程序进行练习。 我想把这些书放进本地存储库。但是我要将值推入的数组开始时是未定义的，然后设置为null。if-else语句不起作用，尽管条件应该返回true，但它仍会在if语句和if语句中运行。它从第32行开始，首先声明一个变量booklist，然后检查本地存储中是否存在bookLists，如果不存在，则将值bookLists设置为空数组，否则将从本地存储中获取booklist并解析该数组，然后将该书添加到图书列表中。然后将项目设置为本地存储。至少我是这么想的。你知道我做得不对吗？0.0 HTML在prototype中将Javascript数组设置为null,javascript,prototype,Javascript,Prototype,我正在学习javascript，并通过制作一个简单的图书列表应用程序进行练习。 我想把这些书放进本地存储库。但是我要将值推入的数组开始时是未定义的，然后设置为null。if-else语句不起作用，尽管条件应该返回true，但它仍会在if语句和if语句中运行。它从第32行开始，首先声明一个变量booklist，然后检查本地存储中是否存在bookLists，如果不存在，则将值bookLists设置为空数组，否则将从本地存储中获取booklist并解析该数组，然后将该书添加到图书列表中。然后将项目设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="css/main.css">
<style>
.correct {
color: antiquewhite;
padding: 7px;
margin: 5px 0px 16px 0px;
border: 3px forestgreen solid;
border-radius: 6px;
background-color: forestgreen;
}
.error {
color: antiquewhite;
padding: 7px;
margin: 5px 0px 16px 0px;
border: 3px firebrick solid;
border-radius: 6px;
background-color: firebrick;
}
</style>
<title>Book List Generator</title>
</head>
<body>
<div id="container" class="container booklistContainer">
<h1 class="booklistH1">Add a Book to the Booklist &:<)</h1>
<form id="form">
<div>
<label for="title">Title</label>
<input type="text" id="title" class="u-full-width">
</div>
<div>
<label for="author">Author</label>
<input type="text" id="author" class="u-full-width">
</div>
<div>
<label for="isbn">ISBN#</label>
<input type="text" id="isbn" class="u-full-width">
</div>
<div>
<button class="u-full-width" id="submit">Add a bookmark</button>
</div>
<hr>
<table class="u-full-width">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th></th>
</tr>
</thead>
<tbody id="BookListBody"></tbody>
</table>
</div>
<script src="Js/booklistGenerator.js"></script>
</body>
</html>
// adding a event listener
const sub = document.getElementById("submit").addEventListener("click", valuerRetrivel);
const removeBook = document.getElementById("BookListBody").addEventListener("click", bookRemover);
// the book constructer
function BookConstructer (title, author, isbn){
this.title = title;
this.author = author;
this.isbn = isbn;
};
// The Ui constructer
function UiConstructor() {}
// adding a method to the Ui constructer prtotype
UiConstructor.prototype.addBookToList = function(book){
// grab the table body
const list = document.getElementById("BookListBody");
//create the table row to append the table cells
const row = document.createElement("tr");
// add the cells to the table row using templet strings
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href="#" class="delete">X</a></td>
`;
// append to the table body
list.appendChild(row);
let bookList;
if (localStorage.getItem("bookList" === null)) {
bookList = [];
}else {
bookList = JSON.parse(localStorage.getItem("bookList"));
}
bookList.push(book);
localStorage.setItem("bookList", JSON.stringify(bookList));
alert("task saved");
}
UiConstructor.prototype.alertMessage = function(message, className) {
// create and append the alert message
const alertDiv = document.createElement("div");
alertDiv.className = `alert ${className}`;
alertDiv.setAttribute("id", "alert");
const alertDivTextNode = document.createTextNode(message);
alertDiv.appendChild(alertDivTextNode);
const parent = document.getElementById("container");
const form = document.getElementById("form");
parent.insertBefore(alertDiv, form);
// remove the alert after 3 seconds
setTimeout(function(){
document.getElementById("alert").remove();
},3000);
}
UiConstructor.prototype.successMessage = function(message, className) {
// create and append the success message
const successDiv = document.createElement("div");
successDiv.className = `success ${className}`;
successDiv.setAttribute("id", "success");
const successtDivTextNode = document.createTextNode(message);
successDiv.appendChild(successtDivTextNode);
const parent = document.getElementById("container");
const form = document.getElementById("form");
parent.insertBefore(successDiv, form);
console.log(UiConstructor);
// remove the alert after 3 seconds
setTimeout(function(){
document.getElementById("success").remove();
},3000);
}
// retriving the form values
function valuerRetrivel(e) {
// initating a Ui constructor to accses its methods
const ui = new UiConstructor();
// reguler expression that checks for whitespace
const regexp = /^\s+$/;
// retriving the form input values
const title = document.getElementById("title").value,
author = document.getElementById("author").value,
isbn = document.getElementById("isbn").value;
const resultTitle = regexp.test(title);
const resultAuthor = regexp.test(author)
const resultIsbn = regexp.test(isbn);
// cheacking for white space
if (resultTitle === true
|| resultAuthor === true
|| resultIsbn === true
|| title === ""
|| author === ""
|| isbn === "") {
// calling the alert message and passing the arguments
ui.alertMessage("All form fields must have content", "error");
e.preventDefault();
return false;
}else {
// calling the book constructer function to create a book object
const book = new BookConstructer(title, author, isbn);
// initating the ui constructer and creating a new book object
ui.addBookToList(book);
console.log(ui);
// calling the success message method and passing the arguments
ui.successMessage("Success!", "correct");
// clearing the current input values
const titleClear = document.getElementById("title").value = "",
authorClear = document.getElementById("author").value = "",
isbnClear = document.getElementById("isbn").value = "";
e.preventDefault();
return true;
}
};
function bookRemover(e) {
if (e.target.className === "delete") {
if(confirm("Are you sure you want to delete this link?")) {
e.target.parentElement.parentElement.remove();
e.preventDefault();
}
}
}
//添加事件侦听器
const sub=document.getElementById（“提交”）.addEventListener（“单击”，ValuerTrivel）；
const removeBook=document.getElementById（“BookListBody”）.addEventListener（“单击”，bookRemover）；
//图书建设者
函数BookConstructor（标题、作者、isbn）{
this.title=标题；
this.author=作者；
这是isbn=isbn；
};
//Ui构造函数
函数UiConstructor（）{}
//向Ui构造函数prtotype添加方法
UiConstructor.prototype.addBookToList=函数（书本）{
//抓住桌子
const list=document.getElementById（“BookListBody”）；
//创建表格行以附加表格单元格
常量行=document.createElement（“tr”）；
//使用模板字符串将单元格添加到表行
row.innerHTML=`
${book.title}
${book.author}
${book.isbn}
`;
//追加到表体
list.appendChild（行）；
让书单；
if（localStorage.getItem（“bookList”==null））{
书目=[]；
}否则{
bookList=JSON.parse（localStorage.getItem（“bookList”）；
}
bookList.push（book）；
setItem（“bookList”，JSON.stringify（bookList））；
警报（“任务已保存”）；
}
UiConstructor.prototype.alertMessage=函数（消息，类名）{
//创建并附加警报消息
const alertDiv=document.createElement（“div”）；
alertDiv.className=`alert${className}`；
alertDiv.setAttribute（“id”、“警报”）；
const alertDivTextNode=document.createTextNode（消息）；
alertDiv.appendChild（alertDivTextNode）；
const parent=document.getElementById（“容器”）；
const form=document.getElementById（“表单”）；
parent.insertBefore（alertDiv，form）；
//3秒钟后删除警报
setTimeout（函数（）{
document.getElementById（“警报”）.remove（）；
},3000);
}
UiConstructor.prototype.successMessage=函数（消息，类名）{
//创建并附加成功消息
const successDiv=document.createElement（“div”）；
successDiv.className=`success${className}`；
successDiv.setAttribute（“id”、“success”）；
const successtDivTextNode=document.createTextNode（消息）；
successDiv.appendChild（successtDivTextNode）；
const parent=document.getElementById（“容器”）；
const form=document.getElementById（“表单”）；
parent.insertBefore（successDiv，form）；
console.log（UiConstructor）；
//3秒钟后删除警报
setTimeout（函数（）{
document.getElementById（“成功”）.remove（）；
},3000);
}
//检索表单值
功能值三级（e）{
//初始化Ui构造函数以访问其方法
const ui=新的UiConstructor（）；
//检查空白的正则表达式
常量regexp=/^\s+$/；
//检索表单输入值
const title=document.getElementById（“title”）.value，
author=document.getElementById（“author”）.value，
isbn=document.getElementById（“isbn”）.value；
const resultitle=regexp.test（标题）；
const resultAuthor=regexp.test（作者）
const resultIsbn=正则表达式测试（isbn）；
//空白区检查
如果（resultitle==true
||ResultAthor==真
||resultIsbn==true
||标题===“”
||作者==“”
||isbn==“”）{
//调用警报消息并传递参数
ui.alertMessage（“所有表单字段必须有内容”、“错误”）；
e、 预防默认值（）；
返回false；
}否则{
//调用book Constructor函数创建book对象
const book=新的图书建设者（标题、作者、isbn）；
//初始化ui构造函数并创建一个新的book对象
ui.addBookToList（书籍）；
控制台日志（ui）；
//调用成功消息方法并传递参数
ui.successMessage（“Success！”，“correct”）；
//清除当前输入值
const titleClear=document.getElementById（“title”）.value=“”，
authorClear=document.getElementById（“作者”）.value=“”，
isbnClear=document.getElementById（“isbn”）.value=“”；
e、 预防默认值（）；
返回true；
}
};
功能除书器（e）{
如果（e.target.className==“删除”）{
如果（确认（“您确定要删除此链接吗？”））{
e、 target.parentElement.parentElement.remove（）；
e、 预防默认值（）；
}
}
}
if (localStorage.getItem("bookList" === null)) {
图书列表if (localStorage.getItem("bookList" === null)) {
JSON.parse(localStorage.getItem("bookList"))