Converting JavaScript Object to Float

Question

I am currently trying to make an application where I can add up the columns of an HTML table. I am able to add inputs to the table but when I try to add up the columns I get, "NaN" error.

/* Function to calculate income */
function Add() {
  // Variables from input field
  var table = document.getElementById("Expenses");
  var name = document.getElementById("Name").value;
  var price = parseFloat(document.getElementById("Price").value);
  if (price == "" && name == "") {
    alert("Please enter in values.");
  } else {
    // Insert a default row from here:
    var Entry = table.insertRow(-1);
    var col0 = Entry.insertCell(0);
    var col1 = Entry.insertCell(1);
    col0.innerHTML = name;
    col1.innerHTML = "$" + parseFloat(price);
    document.getElementById("Name").value = "";
    document.getElementById("Price").value = "";
    console.log(typeof col1);
  }
}

/* Function to add up last column */
function Calculate() {
  var table = document.getElementById("Expenses");
  var sumVal = 0;
  var Entry = table.insertRow(-1);
  var col0 = Entry.insertCell(0);
  var col1 = Entry.insertCell(1);
  for (var i = 1; i < table.rows.length; i++) {
    sumVal += parseFloat(table.rows[i].cells[1]);
  }
  col0.innerHTML = "All Expenses";
  col1.innerHTML = sumVal;
}

<div class="body">
  <div class="container">
    <div class="center">
      <h3>Enter Expenses Below</h3>
      <ul class="info">
        <li>
          <input type="text" placeholder="Name of Expense" id="Name">
        </li>
        <li>
          <input type="number" min="0" placeholder="Price of Expense" id="Price">
        </li>
      </ul>
    </div>
  </div>
  <table class="topmargin results-field" id="Expenses">
    <tr>
      <th>Name of Expense</th>
      <th>Price of Expense</th>
    </tr>
  </table>
  <div class="container1">
    <div class="center1">
      <button type="button" id="Add" onclick="Add()">Add</button>
      <button type="button" id="Remove" onclick="Remove()">Remove</button>
      <button type="button" id="Calculate" onclick="Calculate()">Calculate</button>
      <button type="button" id="Print" onclick="window.print()">Print</button>
    </div>
  </div>
</div>

Any help is appreciated. Thank you.

parseFloat cannot convert a string to a number if the first non whitespace character is not a number : "[parseFloat returns] NaN when the first non-whitespace character cannot be converted to a number." — Seblor
– Seblor, Commented Apr 4, 2021 at 23:51
You are trying to parse an element object in Calculate()...not a string ... cells[i] is a <td> — charlietfl
– charlietfl, Commented Apr 4, 2021 at 23:53

umutcakir · Accepted Answer · 2021-04-04 23:58:26Z

Cell is a td element so we should get its innerHTML or innerText and remove '$' symbol from it. And for loop should be table.rows.length-1 because of last sum row. And it's clean now!

/* Function to calculate income */
function Add() {
  // Variables from input field
  var table = document.getElementById("Expenses");
  var name = document.getElementById("Name").value;
  var price = parseFloat(document.getElementById("Price").value);
  if (price == "" && name == "") {
    alert("Please enter in values.");
  } else {
    // Insert a default row from here:
    var Entry = table.insertRow(-1);
    var col0 = Entry.insertCell(0);
    var col1 = Entry.insertCell(1);
    col0.innerHTML = name;
    col1.innerHTML = "$" + parseFloat(price);
    document.getElementById("Name").value = "";
    document.getElementById("Price").value = "";
    console.log(typeof col1);
  }
}

/* Function to add up last column */
function Calculate() {
  var table = document.getElementById("Expenses");
  var sumVal = 0;
  var Entry = table.insertRow(-1);
  var col0 = Entry.insertCell(0);
  var col1 = Entry.insertCell(1);
  for (var i = 1; i < table.rows.length-1; i++) {
    sumVal += parseFloat(table.rows[i].cells[1].innerHTML.replace('$',''));
  }
  col0.innerHTML = "All Expenses";
  col1.innerHTML = "$" + sumVal;
}

<div class="body">
  <div class="container">
    <div class="center">
      <h3>Enter Expenses Below</h3>
      <ul class="info">
        <li>
          <input type="text" placeholder="Name of Expense" id="Name">
        </li>
        <li>
          <input type="number" min="0" placeholder="Price of Expense" id="Price">
        </li>
      </ul>
    </div>
  </div>
  <table class="topmargin results-field" id="Expenses">
    <tr>
      <th>Name of Expense</th>
      <th>Price of Expense</th>
    </tr>
  </table>
  <div class="container1">
    <div class="center1">
      <button type="button" id="Add" onclick="Add()">Add</button>
      <button type="button" id="Remove" onclick="Remove()">Remove</button>
      <button type="button" id="Calculate" onclick="Calculate()">Calculate</button>
      <button type="button" id="Print" onclick="window.print()">Print</button>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Converting JavaScript Object to Float

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related