Javascript Can'；找不到为什么不执行if块_Javascript

Javascript Can'；找不到为什么不执行if块

javascript

Javascript Can'；找不到为什么不执行if块,javascript,Javascript,我是一个javascript新手，我一直在关注youtube上的一段视频，该视频介绍了如何使用javascript创建一个简单的项目，比如booklist应用程序。教程中有很好的解释，但当我尝试自己做这件事时，有一点我无法理解到底发生了什么该项目基本上是关于当我提交的书的细节，它将被添加到网页中的表，也将在本地存储也存储。与此相同，当从表中删除书籍时，我需要从本地存储中删除书籍的详细信息。下面是设置类Store的代码，该类使用方法getBooks从本地存储获取书籍，addBook向本地存储

我是一个javascript新手，我一直在关注youtube上的一段视频，该视频介绍了如何使用javascript创建一个简单的项目，比如booklist应用程序。教程中有很好的解释，但当我尝试自己做这件事时，有一点我无法理解到底发生了什么

该项目基本上是关于当我提交的书的细节，它将被添加到网页中的表，也将在本地存储也存储。与此相同，当从表中删除书籍时，我需要从本地存储中删除书籍的详细信息。

下面是设置类Store的代码，该类使用方法getBooks从本地存储获取书籍，addBook向本地存储添加新书，removeBook从本地存储移除书籍


class Store{
    static getBooks(){
        let books;
        if (localStorage.getItem('books') == null) {
            books = [];
        } else{
            books = JSON.parse(localStorage.getItem('books'));
        }
        return books;
    }

    static addBook(Book) {
        const books = Store.getBooks();
        books.push(Book);
        localStorage.setItem('books', JSON.stringify(books));
    }

    static removeBook(isbn){
        const books = Store.getBooks();
        books.forEach((book, index) => {
            if (book.isbn === isbn) {
                books.splice(index, 1);
            }
        });

        localStorage.setItem('books', JSON.stringify(books));
    }
}

getBooks和addBooks方法工作得非常好，但是removeBook方法没有以我想要的方式工作

下面是我调用该方法的方式

document.querySelector('#book-list').addEventListener('click', (e) => {
    // Delete book from the table in interface
    UI.deleteBook(e.target);
   
    Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
});

e.target.parentElement.previousElementSibling.textContent

正在获取所需的正确值，因此我确实成功调用了removeBook，但我无法通过方法中的if块

这是我完整的HTML脚本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Book List</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/yeti/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-4">
        <h1 class="display-4 text-center">
        <i class="fas fa-book-open text-primary"></i> My<span class="text-primary">Book
        </Myspan>List</h1>
        <form class="book-form">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" class="form-control" autocomplete="off">
            </div>
            <div class="form-group">
                <label for="author">Author</label>
                <input type="text" id="author" class="form-control" autocomplete="off">
            </div>
            <div class="form-group">
                <label for="isbn">ISBN#</label>
                <input type="text" id="isbn" class="form-control" autocomplete="off">
            </div>
            <input type="submit" value="Add Book" class="btn btn-primary btn-sm">
        </form>
        <table class="table table-striped mt-5">
            <thead>
                <th>Title</th>
                <th>Author</th>
                <th>ISBN</th>
                <th></th>
            </thead>
            <tbody id="book-list"></tbody>
        </table>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>


书单
我的书
列表
标题
作者
ISBN#
标题
作者
ISBN

这是我完整的javascript代码

class Book{
    constructor(title, author, isbn){
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    }
}


class UI{
    static displayBooks(){

        const books = Store.getBooks();

        books.forEach((book) => UI.addBookToList(book))
    }

    static addBookToList(book){
        const list = document.querySelector("#book-list");

        const row = document.createElement('tr');
        row.innerHTML = `
            <td> ${book.title} </td>
            <td> ${book.author} </td>
            <td> ${book.isbn} </td>
            <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
        `;
        list.appendChild(row);
    }

    static deleteBook(el){
        if(el.classList.contains('delete')){
            el.parentElement.parentElement.remove();
        }
    }

    static showAlert(message, className) {
        const div = document.createElement('div');
        div.className = `alert alert-${className}`;
        div.appendChild(document.createTextNode(message));
        const container = document.querySelector('.container');
        const form = document.querySelector('.book-form');
        container.insertBefore(div, form);
        setTimeout(()=>
            document.querySelector('.alert').remove(),
            3000
        );
    }

    static clearFields() {
        document.querySelector('#title').value = '';
        document.querySelector('#author').value = '';
        document.querySelector('#isbn').value = '';
    }
}

class Store{
    static getBooks(){
        let books;
        if (localStorage.getItem('books') == null) {
            books = [];
        } else{
            books = JSON.parse(localStorage.getItem('books'));
        }
        return books;
    }

    static addBook(Book) {
        const books = Store.getBooks();
        books.push(Book);
        localStorage.setItem('books', JSON.stringify(books));
    }

    static removeBook(isbn){
        const books = Store.getBooks();
        books.forEach((book, index) => {
            if (book.isbn.toString() === isbn.toString()) {
                books.splice(index, 1);
            }
        });

        localStorage.setItem('books', JSON.stringify(books));
    }
}

document.addEventListener("DOMContentLoaded", UI.displayBooks());


document.querySelector('.book-form').addEventListener('submit', (e) => {

    e.preventDefault();
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const isbn = document.querySelector('#isbn').value;

    if (title === '' || author === '' || isbn === '') {
        UI.showAlert("Please fill in all fileds", "danger");
    } else {
        const book = new Book(title, author, isbn);

        UI.addBookToList(book);
        Store.addBook(book);
        UI.clearFields();
        UI.showAlert("Succefully added", 'success');
    }
});

document.querySelector('#book-list').addEventListener('click', (e) => {
    Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
    UI.deleteBook(e.target);
    UI.showAlert("Succefully removed", 'success');
});

教材{
构造函数（标题、作者、isbn）{
this.title=标题；
this.author=作者；
这是isbn=isbn；
}
}
类用户界面{
静态显示书籍（）{
const books=Store.getBooks（）；
books.forEach（（book）=>UI.addBookToList（book））
}
静态addBookToList（书本）{
const list=document.querySelector（“书籍列表”）；
const row=document.createElement（'tr'）；
row.innerHTML=`
${book.title}
${book.author}
${book.isbn}
`;
list.appendChild（行）；
}
静态删除书（el）{
if（el.classList.contains（'delete'））{
el.parentElement.parentElement.remove（）；
}
}
静态showAlert（消息、类名）{
const div=document.createElement（'div'）；
div.className=`alert-alert-${className}`；
div.appendChild（document.createTextNode（message））；
const container=document.querySelector（'.container'）；
const form=document.querySelector（“.book form”）；
container.insertBefore（div，form）；
设置超时（（）=>
document.querySelector（'.alert'）.remove（），
3000
);
}
静态clearFields（）{
document.querySelector（'#title'）。值=''；
document.querySelector（“#author”）。值=”；
document.querySelector（'#isbn'）。值=''；
}
}
班级商店{
静态getBooks（）{
让书；
if（localStorage.getItem（'books'）==null）{
图书=[]；
}否则{
books=JSON.parse（localStorage.getItem（'books'）；
}
还书；
}
静态addBook（Book）{
const books=Store.getBooks（）；
书。推（书）；
setItem（'books'，JSON.stringify（books））；
}
静态removeBook（isbn）{
const books=Store.getBooks（）；
books.forEach（（图书，索引）=>{
if（book.isbn.toString（）==isbn.toString（））{
书籍.拼接（索引，1）；
}
});
setItem（'books'，JSON.stringify（books））；
}
}
document.addEventListener（“DOMContentLoaded”，UI.displayBooks（））；
document.querySelector（'.book form'）。addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
const title=document.querySelector（“#title”）.value；
const author=document.querySelector（“#author”）.value；
const isbn=document.querySelector（'#isbn'）。值；
如果（标题==''| |作者==''| | isbn==''）{
UI.showAlert（“请填写所有文件”，“危险”）；
}否则{
const book=新书（书名、作者、isbn）；
UI.addBookToList（书籍）；
Store.addBook（book）；
UI.clearFields（）；
UI.showart（“成功添加”，“成功”）；
}
});
document.querySelector（“#图书列表”）.addEventListener（'click'，（e）=>{
Store.removeBook（e.target.parentElement.previousElementSibling.textContent）；
UI.deleteBook（即目标）；
UI.showarert（“成功删除”，“成功”）；
});

我花了一个半小时来找出代码中的错误，但我仍然不能，我对javascript完全陌生。

问题是，在HTML中，你在书的ISBN（和其他字段）中填充空格：

    row.innerHTML = `
        <td> ${book.title} </td>
        <td> ${book.author} </td>
        <td> ${book.isbn} </td>
        <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
    `;

如果你的目标是给这些文本留一点空白，那么就用CSS样式来代替

我还遇到了另外两个问题：

你的HTML有
，应该是
您没有正确设置
```
DOMContentLoaded
```
事件的处理程序。参数应该是一个函数，但实际上是（立即）执行一个函数。因此，请删除结尾处的括号：
```
document.addEventListener("DOMContentLoaded", UI.displayBooks);
```

Store.getBook（）

Store.getBook（）

book.isbn

isbn

==

book.isbn.toString（）===isbn.toString（）

document.addEventListener("DOMContentLoaded", UI.displayBooks);