我遵循一些教程。所以我自己写代码，然后观察结果。在教程中，DOMContentLoaded工作，但是当我试图调用这个addentlistener中的函数时，代码失败了。
HTML:
<!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.css" />
<style>
.success,
.error {
color: white;
padding: 5px;
margin: 5px 0 15px 0;
}
.success {
background: green;
}
.error {
background: red;
}
</style>
<title>Book List</title>
</head>
<body>
<div class="container">
<h1>Add Book</h1>
<form id="book-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>
<input type="submit" value="Submit" class="u-full-width" />
</div>
</form>
<table class="u-full-width">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th></th>
</tr>
</thead>
<tbody id="book-list"></tbody>
</table>
</div>
<script src="appes6.js"></script>
</body>
</html>
JS:
class Book {
constructor(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}
}
class UI {
addBookToList(book) {
const list = document.getElementById('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='delete'>X</a></td>
`;
list.appendChild(row);
}
showAlert(message, classname) {
//create div
const div = document.createElement('div');
div.className = `alert ${classname}`;
//add text
div.textContent = message;
//get parent
const container = document.querySelector('.container');
const form = document.querySelector('#book-form');
//insert alert
container.insertBefore(div, form);
//time out
setTimeout(function () {
div.remove();
}, 2000);
}
clearFields() {
document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('isbn').value = '';
}
}
// local storage class
class Store {
static getBooks() {
let books;
if (localStorage.getItem('books') === null) {
books = [];
} else {
books = JSON.parse(localStorage.getItem('books'));
}
return books;
}
static displayBooks() {
const books = this.getBooks();
let ui = new UI();
books.forEach(function (book) {
ui.addBookToList(book);
});
}
static addBook(book) {
let books = this.getBooks();
books.push(book);
localStorage.setItem('books', JSON.stringify(books));
}
static removeBook(book) {
let books = this.getBooks();
books.forEach((b) => console.log(b.title));
books = books.filter((b) => b.title !== book);
localStorage.setItem('books', JSON.stringify(books));
}
}
document.querySelector('#book-list').addEventListener('click', function (e) {
if (e.target.className === 'delete') {
e.target.closest('tr').remove();
Store.removeBook(e.target.closest('tr').querySelector('td:first-child').textContent);
const ui = new UI();
ui.showAlert('Delete success', 'success');
}
});
// event listener for add a book
document.getElementById('book-form').addEventListener('submit', function (e) {
e.preventDefault();
//get form values
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
const isbn = document.getElementById('isbn').value;
//validate
if (title === '' || author === '' || isbn === '') {
//error alert
ui.showAlert('Please fill in all fields', 'error');
return;
}
//instantiate book
const book = new Book(title, author, isbn);
//instantiate UI list
const ui = new UI();
ui.addBookToList(book);
// add to local storage
Store.addBook(book);
ui.showAlert('Successfully added a new book', 'success');
ui.clearFields();
//clear fields
});
Store.displayBooks();
// document.addEventListener('DOMContentLoaded', Store.displayBooks);
如果注释掉最后第二个代码行，并从最后一个代码行删除注释，那么代码会给出一些错误。
在displayBooks方法中改变const books = This.getBooks();为const books = Store.getBooks();
问题是:'this'引用文档对象在那里，在文档名称displayBooks中没有方法