title: How to pull numeric only values from an array of objects to be added together. An Invoice Generator problem
body: <p>I am new to JavaScript and would like some help with the following problem. How do I access &quot;numbers&quot; only in the array that is holding object values and sum them?</p>
  <p>The code for this question is closer to the bottom, the rest is my process and what works so far:</p>
  <p>I have an empty array:</p>
  <pre><code>let customInvoiceItm = []
  </code></pre>
  <p>A function then generates the needed HTML and renders items from input fields to the DOM:</p>
  <pre><code>// RENDER HTML FROM BOTH INPUTS DESCRIPTION AND COST AND DISPALY VIA invoiceItemsArea.innerHTML
  
  function addCustomItem(renderItems) {
      let customItem = &quot;&quot;
      for(let i = 0; i &lt; customInvoiceItm.length; i++){
          customItem += `
          &lt;div class=&quot;invoice-task-total&quot;&gt;
          &lt;h3 id=&quot;inv-task&quot; class=&quot;item&quot;&gt;${renderItems[i].service}&lt;/h3&gt;
          &lt;a href=&quot;&quot; id=&quot;remove-btn&quot;&gt;remove&lt;/a&gt;
          &lt;h3 id=&quot;inv-total&quot; class=&quot;item&quot;&gt;$ ${renderItems[i].cost}&lt;/h3&gt;
          &lt;/div&gt;
          `
      }
  
      // Outputs the input from the input forms onto the screen
      invoiceItemsArea.innerHTML = customItem
  }
  </code></pre>
  <p>The above function is triggered by a button and the data from the input fields is stored/sorted into an Object to be placed into the array. Describing an invoice item/service and its cost:</p>
  <pre><code>// listens for button click and pushes a value from the user entered values from input fields &quot;invoiceDescr&quot; and &quot;invoiceNmbr&quot; Custom Invoice Item Description and Cost into the invoiceArr array
  addNewItemBtn.addEventListener(&quot;click&quot;, function() {
      if(invoiceDescr.value === &quot;&quot; &amp;&amp; invoiceNmbr.value === &quot;&quot;) return 
      
       // Object that sorts input values into its own category
      let items = 
      {
          service:invoiceDescr.value,
          cost:invoiceNmbr.value
      }
  
      customInvoiceItm.push(items)
  
      // Clears the Custom Invoice Item and Cost value fields
      console.log(customInvoiceItm)
      
      invoiceDescr.value = &quot;&quot;
      invoiceNmbr.value = &quot;&quot;
      // Saves these values into Browser's local storage
      localStorage.setItem(&quot;customInvoiceItm&quot;, JSON.stringify(customInvoiceItm))
      
      addCustomItem(customInvoiceItm)
  })
  </code></pre>
  <p>AND HERE IS WHERE MY QUESTION COMES IN. I am trying to then pull only the numeric values from an array and sum them up and display in the Total Amount field in the DOM by referencing the original array declared at the very top and by using dot notation to access the cost values in all the object numeric values in this array like this:</p>
  <pre><code>let arrayItems = customInvoiceItm.cost
  let sum = arrayItems.reduce((x,y) =&gt; x+y)
  
  console.log(sum)
  totalAmount.innerText = sum
  </code></pre>
  <p>It doesn't work. I get the: <code>Uncaught TypeError: can't access property &quot;reduce&quot;, arrayItems is undefined</code></p>