title: Storing value from text field in object, Javascript
body: <p>I want to update my object with values from text fields.</p>
  
  <p>I think the problem is with the click eventhandler on the button but not sure. I've tried a few things, Your help would be amazing.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;&lt;p&gt;Book Name: &lt;/p&gt;&lt;/label&gt;
      &lt;input name="booktitle" id="booktitle" type="text" value="I'm a value"&gt;
      &lt;label&gt;&lt;p&gt;Total Pages: &lt;/p&gt;&lt;/label&gt;
      &lt;input type="text"&gt;
      &lt;label&gt;&lt;p&gt;Current Page: &lt;/p&gt;&lt;/label&gt;
      &lt;input type="text"&gt;
      &lt;button id="my-Btn" type="button"&gt;Add to List&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>(function() {
  // Create book object
  
  var book = {
  
      name: 'JavaScript &amp; jQuery',
      totalPages: 622,
      pages: 162,
      pagesLeft: function() {
          var total = this.totalPages - this.pages;
          return total;
      },
      percentageLeft: function() {
          var totalPercentage = this.pagesLeft() / this.totalPages * 100
          return Math.round(totalPercentage);
      }
  };
  
  // write out book name and pages info
  
  var bookName, totalPages, pagesLeft, percentageLeft; //declares variables
  
  bookName = document.getElementById('bookName'); // gets elements from document
  totalPages = document.getElementById('totalPages');
  pagesLeft = document.getElementById('pagesLeft');
  percentageLeft = document.getElementById('percentageLeft');
  
  bookName.textContent = book.name; // write to document
  totalPages.textContent = 'Total Pages: ' + book.totalPages;
  pagesLeft.textContent = book.pagesLeft();
  percentageLeft.textContent = book.percentageLeft() + '%';
  
  // pull value from text field and set to object
  
  document.getElementById("my-Btn").addEventListener("click", function() {
      book.name = document.getElementById('booktitle').value;
  });
  
  }());
  </code></pre>
  
  <p>Code Pen of what I have so far.</p>
  
  <p><a href="http://codepen.io/Middi/pen/pRGOVW" rel="nofollow noreferrer">http://codepen.io/Middi/pen/pRGOVW</a> </p>
  
  <p>Thanks in advance.</p>