Can't figure out how to get values to add together

JavaScript
1

Hey everyone! I’m currently working on an expense tracker project in javascript and I’ve gotten a bit stuck when it comes to having the values added together to create a final total after they’ve been created. I was wondering if there is something that I was missing, I tried using .reduce but I feel like I’m not doing it right.

Any help is appreciated, thanks!

// "El" = HTML Element
let inputDateEl = document.getElementById("inputDate");
let inputExpenseEl = document.getElementById ("inputExpense");
let inputCostEl = document.getElementById ("inputCost");
let addExpenseEl = document.getElementById("addExpense");
let newDateTableEl = document.getElementById("newDateTable");
let newExpenseTableEl = document.getElementById("newExpenseTable");
let newCostTableEl = document.getElementById("newCostTable");
let tableData1 = document.querySelector ("#myTable th:nth-child(3)");
let tableData2 = document.querySelector ("#myTable th:nth-child(1)");
let tableData3 = document.querySelector ("#myTable th:nth-child(2)");

let valueArray = [ ];

 function bindDataToTable1(){
    var newDataCell = document.createElement ("td");
    var newDataRow = document.createElement ("tr");
    newDataCell.innerText = inputCostEl.value;
  tableData1.appendChild(newDataRow);
    tableData1.appendChild(newDataCell); 
         
}

function addValue() {
    var newValue = inputCostEl.value; 
    valueArray.push(newValue);
    valueArray.reduce((total, valueArray)=> { 
        return total + valueArray.value
    }, 0)
}

addExpenseEl.addEventListener("click", addValue);

console.log("total", addValue)
function bindDataToTable2(){
    var newDataCell = document.createElement ("td");
    var newDataRow = document.createElement ("tr");
    newDataCell.innerText = inputDateEl.value;
    tableData2.appendChild(newDataRow);
    tableData2.appendChild(newDataCell);      
  }


  function bindDataToTable3(){
    var newDataCell = document.createElement ("td");
    var newDataRow = document.createElement ("tr");
    newDataCell.innerText = inputExpenseEl.value;
  tableData3.appendChild(newDataRow);
    tableData3.appendChild(newDataCell);      
}
2

Please post your code and a link to the Challenge you are working on. Thanks.

4

Please post the HTML as well. It would be nice with a repo or a live example (Codepen, Stackblitz, etc.).

You are concatenating strings not adding up numbers. Convert the input to a number before pushing it.

Edit: I don’t know what valueArray.value is supposed to be but you just want the element (the number) you pushed. But don’t name the reduce parameter valueArray, that is just confusing. It isn’t an array inside the reduce and you already have such an identifier in the outer scope as well. You can use value or whatever.

The only property on an array that is close to .value is the .values method that returns an iterator. But I’m sure that isn’t what you want.

Example

const input = document.querySelector("input");
const numbers = [5, 5];

input.addEventListener("change", (e) => {
  const number = Number(e.target.value) || 0;
  numbers.push(number);

  const total = numbers.reduce((sum, number) => sum + number, 0);

  console.log(total);
});
5

Hey, I appreciate the help! I had assumed since the .value method worked when I was trying to create a new HTML element I assumed that it would work the same way.

Here’s the code pen if it helps it make more sense: https://codepen.io/Micah-Iyobebe/pen/BavrOoy

6

You didn’t make any changes to the code.

  1. Convert the input string to a number. input elements of the type number still give you back a string.

  2. Change the second reduce callback parameter to value (or number or something reasonable) and use that variable for the addition inside the reduce.

  3. Use the value reduce returns.

function addValue() {
  console.log('input is a', typeof inputCostEl.value);
  const newValue = Number(inputCostEl.value);
  console.log('newValue is a', typeof newValue);
  
  valueArray.push(newValue);
  const total = valueArray.reduce((total, value) => total + value, 0);
  
  console.log("use the total for something", total);
}
7

Thanks for your help! I didn’t know that Javascript was reading the input value as a string and not a number and that a conversion needed to take place first, haha.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.