Javascript - Type Error for JS library project & DOM Traversal issues

Problem:

The project is to create a library using vanilla JS and HTML. I have the whole project essentially completed except two functions fail to work.
Those being the remove book and change read status, here are their code snippets respectively:

Contents

Problem:Solution:

const removeBook = (e) => {
    const title = e.currentTarget.innerHTML.replaceAll(
        '"',
        '',
        'Title: ')
    library.removeBook(title)
    updateLibContainer()
    console.log('remove');
}

const toggleRead = (e) => {
    const title = e.currentTarget.innerHTML.replaceAll(
        '"',
        '',
        'Title: ')
    const book = library.getTitle(title)
    book.isRead = !book.isRead
    console.log('read');
    updateLibContainer()
}

Here is the full write up of the JS:

// Selectors for pop up and closing pop up when x is pressed
const popUp = document.querySelector('.pop-up');
const closePopUp = document.getElementsByTagName('span')[0];
closePopUp.addEventListener('click', () => popUp.style.display = 'none')

const newBookBtn = document.querySelector('.newbtn');
newBookBtn.addEventListener('click', () => popUp.style.display = 'block')


// Constructor for books
class Book {
  constructor(
    title = 'Unkown',
    author = 'Unkown',
    pages = 0,
    isRead = false
  ) {
    this.title = title
    this.author = author
    this.pages = pages
    this.isRead = isRead
  }
}

// Constructor for Library
class Library {
  constructor() {
    this.books = []
  }
  addBook(newBook) {
    this.books.push(newBook)
  }
  removeBook(title) {
    this.books = this.books.filter((book) => book.title !== title)
  }
  getTitle(title) {
    return this.books.find(book => book.title === title)
  }

  isInLibrary(title) {
    return this.books.some(book => book.title === title)
  }
}
const library = new Library()

// Additional UI declarations
const LibContainer = document.getElementById('lib-container')
const addBookForm = document.getElementById('add-form')

// Handling and creating book from form input data
const bookFromInput = () => {
  const title = document.getElementById('title').value
  const author = document.getElementById('author').value
  const pages = document.getElementById('pages').value
  const isRead = document.getElementById('is-read').checked

  return new Book(title, author, pages, isRead)

}
// Function when form is submitted to create new book from input, check if it exists
// and close form
const addNewBook = (e) => {
  e.preventDefault()
  const newBook = bookFromInput()
  if (library.isInLibrary(newBook.title)) {
    alert('Book already exists')
  } else {
    library.addBook(newBook)
    exitForm()
    updateLibContainer()
  }
}
const exitForm = () => {
  addBookForm.reset()
  popUp.style.display = 'none'
}
const resetLibContainer = () => {
  LibContainer.innerHTML = ''
  console.log('reset Container');
}
const updateLibContainer = () => {
  resetLibContainer()
  for (let book of library.books) {
    createBookCard(book)
  }
  console.log('updateContainer');
}


// Creating book card 
const createBookCard = (book) => {
  const bookCard = document.createElement('div')
  const title = document.createElement('p')
  const author = document.createElement('p')
  const pages = document.createElement('p')
  const changeReadStatus = document.createElement('button')
  const removeBookBttn = document.createElement('button')

  bookCard.classList.add('book-card')
  changeReadStatus.classList.add('change-read-status')
  changeReadStatus.onclick = toggleRead
  removeBookBttn.classList.add('remove-book')
  removeBookBttn.onclick = removeBook

  title.textContent = `Title: ${book.title}`
  author.textContent = `Author: ${book.author}`
  pages.textContent = `Pages: ${book.pages}`
  removeBookBttn.textContent = 'Remove'

  if (book.isRead) {
    changeReadStatus.textContent = 'Read'
    changeReadStatus.style.backgroundColor = '#68f364'
  } else {
    changeReadStatus.textContent = 'Not read'
    changeReadStatus.style.backgroundColor = '#d16767'
  }


  bookCard.appendChild(title)
  bookCard.appendChild(author)
  bookCard.appendChild(pages)
  bookCard.appendChild(changeReadStatus)
  bookCard.appendChild(removeBookBttn)
  LibContainer.appendChild(bookCard)
}

const removeBook = (e) => {

  const title = e.currentTarget.innerHTML.replaceAll(
    '"',
    '',
    'Title: ')
  library.removeBook(title)
  updateLibContainer()
  console.log('remove');
}
const toggleRead = (e) => {
  const title = e.currentTarget.innerHTML.replaceAll(
    '"',
    '',
    'Title: ')
  const book = library.getTitle(title)
  book.isRead = !book.isRead
  console.log('read');
  updateLibContainer()
}

addBookForm.onsubmit = addNewBook

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <h1>The Library</h1>
  </div>

  <div class="newbtn-container">
    <button class="newbtn">+ New Book</button>
  </div>
  <div class="pop-up">
    <form class="form" action id="add-form">
      <span>x</span>
      <legend>New book</legend>
      <input type="text" id="title" class="form" placeholder="Title">
      <input type="text" id="author" class="form" placeholder="Author">
      <input type="text" id="pages" class="form" placeholder="Pages">

      <div class="checkbox">
        <label>Read: </label>
        <input type="checkbox" class="form" id="is-read">
      </div>
      <button class="form" id="submit">Add</button>
    </form>
  </div>
  <div id="lib-container">
    <div class="book-card">
      <p>Title: 22</p>
      <p>Author: 22</p>
      <p>Pages: 22</p>
      <button class="change-read-status" style="background-color: rgb(209, 103, 103);">Not read</button>
      <button class="remove-book">Remove</button>
    </div>
  </div>

</body>
<script src="script.js"></script>

</html>

The book card in the HTML code above is just an example placeholder if a user were to input a book.

Now the exact issue is that both aforementioned functions just dont work at all. The toggle read function produces a Type Error on the line book.isRead = !book.isRead.
The remove function just doesnt do its purpose at all. Ive tried the past 3 days to try and trouble shoot using the methods I have learned all to no real avail. Sorry in advance if information is missing or if this isnt formatted properly.

Solution:

The problem is that the book titles aren’t in the innerHTML of the buttons. It’s in the title <p> element. So you need to find the title element associated with the clicked button.

I recommend giving the paragraph a class:

const title = document.createElement('p');
title.classList.add("title");

Then you can find the div containing the button and navigate to the corresponding title element.

There’s no need to remove " from the title, you never added them when creating the element. You just need to remove Title: at the beginning.

const title = e.currentTarget.closest(".book-card").querySelector(".title").innerText.replace("Title: ");

Full code

// Selectors for pop up and closing pop up when x is pressed
const popUp = document.querySelector('.pop-up');
const closePopUp = document.getElementsByTagName('span')[0];
closePopUp.addEventListener('click', () => popUp.style.display = 'none')

const newBookBtn = document.querySelector('.newbtn');
newBookBtn.addEventListener('click', () => popUp.style.display = 'block')


// Constructor for books
class Book {
  constructor(
    title = 'Unkown',
    author = 'Unkown',
    pages = 0,
    isRead = false
  ) {
    this.title = title
    this.author = author
    this.pages = pages
    this.isRead = isRead
  }
}

// Constructor for Library
class Library {
  constructor() {
    this.books = []
  }
  addBook(newBook) {
    this.books.push(newBook)
  }
  removeBook(title) {
    this.books = this.books.filter((book) => book.title !== title)
  }
  getTitle(title) {
    return this.books.find(book => book.title === title)
  }

  isInLibrary(title) {
    return this.books.some(book => book.title === title)
  }
}
const library = new Library()

// Additional UI declarations
const LibContainer = document.getElementById('lib-container')
const addBookForm = document.getElementById('add-form')

// Handling and creating book from form input data
const bookFromInput = () => {
  const title = document.getElementById('title').value
  const author = document.getElementById('author').value
  const pages = document.getElementById('pages').value
  const isRead = document.getElementById('is-read').checked

  return new Book(title, author, pages, isRead)

}
// Function when form is submitted to create new book from input, check if it exists
// and close form
const addNewBook = (e) => {
  e.preventDefault()
  const newBook = bookFromInput()
  if (library.isInLibrary(newBook.title)) {
    alert('Book already exists')
  } else {
    library.addBook(newBook)
    exitForm()
    updateLibContainer()
  }
}
const exitForm = () => {
  addBookForm.reset()
  popUp.style.display = 'none'
}
const resetLibContainer = () => {
  LibContainer.innerHTML = ''
  console.log('reset Container');
}
const updateLibContainer = () => {
  resetLibContainer()
  for (let book of library.books) {
    createBookCard(book)
  }
  console.log('updateContainer');
}


// Creating book card 
const createBookCard = (book) => {
  const bookCard = document.createElement('div')
  const title = document.createElement('p')
  title.classList.add("title")
  const author = document.createElement('p')
  const pages = document.createElement('p')
  const changeReadStatus = document.createElement('button')
  const removeBookBttn = document.createElement('button')

  bookCard.classList.add('book-card')
  changeReadStatus.classList.add('change-read-status')
  changeReadStatus.onclick = toggleRead
  removeBookBttn.classList.add('remove-book')
  removeBookBttn.onclick = removeBook

  title.textContent = `Title: ${book.title}`
  author.textContent = `Author: ${book.author}`
  pages.textContent = `Pages: ${book.pages}`
  removeBookBttn.textContent = 'Remove'

  if (book.isRead) {
    changeReadStatus.textContent = 'Read'
    changeReadStatus.style.backgroundColor = '#68f364'
  } else {
    changeReadStatus.textContent = 'Not read'
    changeReadStatus.style.backgroundColor = '#d16767'
  }


  bookCard.appendChild(title)
  bookCard.appendChild(author)
  bookCard.appendChild(pages)
  bookCard.appendChild(changeReadStatus)
  bookCard.appendChild(removeBookBttn)
  LibContainer.appendChild(bookCard)
}

const removeBook = (e) => {

  const title = e.currentTarget.closest(".book-card").querySelector(".title").innerText.replace('Title: ', '')
  library.removeBook(title)
  updateLibContainer()
  console.log('remove');
}
const toggleRead = (e) => {
  const title = e.currentTarget.closest(".book-card").querySelector(".title").innerText.replace('Title: ', '')
  const book = library.getTitle(title)
  book.isRead = !book.isRead
  console.log('read');
  updateLibContainer()
}

addBookForm.onsubmit = addNewBook

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <h1>The Library</h1>
  </div>

  <div class="newbtn-container">
    <button class="newbtn">+ New Book</button>
  </div>
  <div class="pop-up">
    <form class="form" action id="add-form">
      <span>x</span>
      <legend>New book</legend>
      <input type="text" id="title" class="form" placeholder="Title">
      <input type="text" id="author" class="form" placeholder="Author">
      <input type="text" id="pages" class="form" placeholder="Pages">

      <div class="checkbox">
        <label>Read: </label>
        <input type="checkbox" class="form" id="is-read">
      </div>
      <button class="form" id="submit">Add</button>
    </form>
  </div>
  <div id="lib-container">
    <div class="book-card">
      <p>Title: 22</p>
      <p>Author: 22</p>
      <p>Pages: 22</p>
      <button class="change-read-status" style="background-color: rgb(209, 103, 103);">Not read</button>
      <button class="remove-book">Remove</button>
    </div>
  </div>

</body>
<script src="script.js"></script>

</html>