0

I want to call Books.removeBook(${id}) inside genBookMarkup();

static genBookMarkup({
      id,
      title,
      author,
    }) {
      return `<li id=${id}><p class="book_title">${title}</p>
      <p class="book_author">${author}</p>
      <button class="removeButton" onclick="Books.removeBook(${id})">Remove</button></li>`;
    }

But getting an error:

Uncaught ReferenceError: Books is undefined.

How can I implement this? I don't see a way with adjacentHTML.

Edit: I have tried to import Books but it's still not being recognized.

Chris Happy
  • 7,088
  • 2
  • 22
  • 49
Daf
  • 31
  • 2
  • Please read [ask], in particular the bit about not providing the text of error messages in the form of a screenshot. – Quentin May 30 '22 at 20:46
  • It says `Books` is not defined. Why should it be? You haven't defined it in the code you've shared. – Quentin May 30 '22 at 20:46
  • `onclick` attributes are awful. They have [weird scope](https://stackoverflow.com/questions/31613748/why-cant-i-call-a-function-named-clear-from-an-onclick-attribute) and are a form of [eval](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea). We've had addEventListener for long enough now. And delegated event handlers make adding new elements really easy. – Quentin May 30 '22 at 20:48
  • "Edit: I have tried to import Books but it's still not being recognized." — How? You haven't defined it in the code you've shared. – Quentin May 30 '22 at 20:49

0 Answers0