How can I fix this error with querySelector is null?

Question

<form id="book-form">
        <div class="form-group">
       
        <input type="submit" value="Add Book" class="btn btn-primary btn-block">
      </form>

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

  // Get form values
 


  }
});

Every time I open the console, the Uncaught TypeError: document.querySelector(...) is null is shown up and the whole code didn't run properly.

Answer 1

You have multiple syntax errors in your code:

1. Close your div container.

2. Remove the second } of addEventListener.

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

    // Prevent actual submit
    e.preventDefault();

    // Get form values
    console.log("Worked");

});

<form id="book-form">
    <div class="form-group"></div>
    <input type="submit" value="Add Book" class="btn btn-primary btn-block">
</form>