title: Add values of javascript array
body: <p>I'm trying to complete a system with which a book shop can enter the a sample of 5 books that were sold that day along with their prices. These values would then be displayed to the page.
  I have managed this and now wish to add the total price. I have tried all the methods mentioned on stack overflow and elsewhere to get the sume of the price array but I either get the last price entered or "NaN" when i try to get the total. Please help!!!
  Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function() {
    enterBooks()
  }); // Event listener - When page loads, call enterBooks function
  
  function enterBooks() { // enterBooks function
    
    var books = []; // Defines books variable as an array
    
    for (var i = 0; i &lt; 5; i++) { // for loop to loop 5 times
      
      books.push("&lt;li&gt;" + prompt("Enter a book") + "&lt;/li&gt;"); // PUSH adds a new item to the array in the form of a prompt with &lt;li&gt; tags either side of each.
  
      var price = []; // Defines price variable as an array
      
      for (var p = 0; p &lt; 1; p++) { // for loop to loop 1 time
        
        price.push("&lt;li&gt;" + "£" + parseInt(prompt("Enter the price")) + "&lt;/li&gt;"); // Once again PUSH adds a new item to the array in the form of a prompt with &lt;li&gt; tags either side of each. This then displays next to each book.
  
      }
      document.getElementById("displayPrice").innerHTML += (price.join(""));
      document.getElementById("displayBooks").innerHTML = (books.join(""));
    }
    // --------- This is the part i cannot seem to get -----------
    var total = 0;
  
    for (var t = 0; t &lt; price.length; t++) {
      total = total + price[t];
    }
    document.getElementById("total").innerHTML = total;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
      list-style-type: decimal; /* Gives list items numbers */
      font-size:25px;
      width:20%;
  }
  #displayBooks {
      float:left;
      width:20%;
  }
  #displayPrice {
      float:left;
      width:50%;
      list-style-type: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bookshop&lt;/title&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;
    &lt;!-- StyleSheet --&gt;
  &lt;/head&gt;
  
  
  &lt;body class="text-center"&gt;
    &lt;h1&gt;BookShop&lt;/h1&gt; 
    &lt;!-- Header --&gt;
    &lt;h3&gt;Books sold&lt;/h3&gt; 
    &lt;!-- Team intro --&gt;
    &lt;ul id="displayBooks"&gt;
      &lt;!-- Div to display the teams --&gt;
  
    &lt;/ul&gt;
    &lt;ul id="displayPrice"&gt;
      &lt;!-- Div to display the teams --&gt;
  
    &lt;/ul&gt;
    &lt;div id="total"&gt;
  
    &lt;/div&gt;
  
    &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S This is my first time asking a question on here so if it's not structured very well then I apologise in advance and hope you can still make it all out</p>