0

I am trying to create a simple "book keeping" web application as specified in The Odin Project. My problem is that when I click the "submit" button in my form, the data is sent to the array but then disappears immediately out of it. Running the "addBookToLibrary" function in the js file itself works just fine, but running it via the onclick is problematic.

I'm including the HTML and js.

Any help is appreciated as I can't see why the function works when called in the js file but not when called through the HTML onclick method!

let myLibrary = []
const table = document.querySelector("#libraryTable")

//constructs the book prototype
function Book(title, author) {
  this.title = title;
  this.author = author;
}

//creates the newBook and pushes it to the library
function addBookToLibrary(title, author) {
  let newBook = new Book(title, author)
  myLibrary.push(newBook)
  render()
}

//a starter book
addBookToLibrary("The Hobbit", "Tolkien")
addBookToLibrary("The Hobbit", "Tolkien")
addBookToLibrary("The Hobbit", "Tolkien")

function render() {
  book = myLibrary[myLibrary.length - 1]
  table.innerHTML += `<tr class="bookEntry"><td>${book.title}</td><td>${book.author}</td>`
}

addButton = document.querySelector("#submitButton")

function addyWaddy() {
  addBookToLibrary(newBookForm[0].value, newBookForm[1].value);
};
<div id="container">
  <div class="grid-item" id="leftSide">
    <h1>Add books here</h1>
    <form action="" id="newBookForm">
      <input type="text" id="newTitle" value="Insert book title" name="titleName"></input>
      <input type="text" id="newAuthor" value="Insert book author" name="authorName"></input>
      <br>
      <input type="submit" id="submitButton" value="Submit" onclick="addyWaddy()">
    </form>
  </div>

  <div class="grid-item" id="rightSide">
    <h1>Books go here</h1>
    <table id="libraryTable">
      <tr>
        <th>Title</td>
          <th>Author</td>
      </tr>
    </table>
  </div>
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Gerry Tierney
  • 7
  • 2
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit – Teemu Oct 30 '19 at 13:34
  • Where's you JavaScript, and what are you doing to stop the form from being submitted and reloading the page, which is the expected behavior? – j08691 Oct 30 '19 at 13:34
  • The JavaScript might need to be scrolled to, but I have included it. I was unaware forms reloaded upon submission. I'll need to look into them a little more to see how to stop that. Or maybe just replacing the form submission with a regular button which runs the function could work? – Gerry Tierney Oct 30 '19 at 13:41
  • Does this answer your question? [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) – Heretic Monkey Oct 30 '19 at 13:48

2 Answers2

0

the action on your form is still trying to go to another page. You'll want to make the action action="#" and then you should be able to add as much as you want!

BMoe872
  • 141
  • 2
  • 12
0

Remove the "onclick" attribute from the submit button. It is a submit button so instead you have to add a listener on the "submit" event like this:

<form action="#" id="newBookForm" onsubmit="return addyWaddy()">
Andrew
  • 373
  • 2
  • 15