title: Trying to make a progress counter for a study buddy type website
body: <p>The user fills out an input form with the number of pages and I want the user to be able to input the pages done (var pagesToBeSubtracted) and the function to subtract the pages and update it on the site.</p>
  
  <pre><code>function subtractPages() {
   // Total pages that are grabbed from the input form
  var totalPages = document.getElementById("numPages").value;
  
  //Value of the input type number for done pages
  var pagesToBeSubtracted = document.getElementById("donePages").value;
  
  var remainingPages;
  
  remainingPages = totalPages - pagesToBeSubtracted;
  
  //Updating the number on the actual website
  document.getElementById("pagesLeft").innerHTML = remainingPages;
  </code></pre>
  
  <p>However if you have total pages at 100 and you put that you did 5 pages it will go to 95 but if you press it again it will stay the same, if you bump it to 10 it will go down to 90 etc...</p>
  
  <p>I get I should somehow save the result so that the next time the function is called, it doesn't start from the original number every time but from the updated one. But I can't figure out how to do it since I set the variable for total pages from the input form and every time the function is called it sets it at the same number again.</p>
  
  <p>I'm sure I'm missing something elementary but I can't figure it out.</p>