Question

每次我对一个项目感兴趣时，我就会开始获得如此多的null值，null属性等。我永远无法弄清楚是什么原因引起的，这让我发疯。我将得到此“无法读取null的属性'addEventListener'”的原因是什么？

// event display Book
document.addEventListener('DOMContentLoaded', ui.displayBooks)


// event add Book
document.querySelector('#book-form').addEventListener('submit', (e)=> {
  // prevent actual submit
  e.preventDefault();

  //get form values
  const title = document.querySelector('#title').value;
  const author = document.querySelector('#author').value;
  const isbn = document.querySelector('#isbn').value;
// instantiate book
  const book = new book(title,author,isbn);
  console.log(book);

这是html

<!DOCTYPE html>
<html>
  <head>
    <title>BookList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="css\bootstrap.min.css">

<!-- main css -->
    <link rel="stylesheet" href="css\main.css">

<!-- font awesome js -->
<script src="js\all.js" charset="utf-8"></script>

<!-- google fonts -->
 <link href="" rel="stylesheet">
  </head>


  <body>
    <container class="mt-4 align-content-center align-items-center">
      <h1 class="display-4 text-center"><i class="fas fa-book-open text-primary"></i> My <span class="text-primary">Book</span> List</h1>
      <form action="" class="book-form">
        <div class="form-group">
          <label for="title">Title</label>
          <input type="text" id="title" class="form-control">
        </div>
        <div class="form-group">
          <label for="title">Author</label>
          <input type="text" id="author" class="form-control">
        </div>
        <div class="form-group">
          <label for="title">ISBN</label>
          <input type="text" id="isbn" class="form-control">
        </div>
        <input type="submit" name="" value="Add Book" class="btn btn-primary btn-block">
      </form>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Title</th>
            <th>Author</th>
            <th>ISBN</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="book-list"></tbody>
      </table>
    </container>











    <!-- jquery -->
  <script src="js\jquery-3.4.1.min.js" charset="utf-8"></script>

  <!-- bootstrap -->
  <script src="js\bootstrap.bundle.min.js" charset="utf-8"></script>

  <!-- js -->
  <script src="js\index.js" charset="utf-8"></script>

  </body>
</html>

我只想学习如何解决此问题，这样我就可以一次完成一个项目。

为什么我不断收到“空值”错误

0 个答案: