将 JavaScript 对象转换为浮点数

Question

我目前正在尝试制作一个应用程序，我可以在其中添加 HTML 表格的列。我可以向表中添加输入，但是当我尝试将列相加时，出现“NaN”错误。

/* 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>

感谢任何帮助。谢谢。

Answer 1

Cell 是一个 td 元素，所以我们应该获取它的 innerHTML 或 innerText 并从中删除 '$' 符号。由于最后一行，for 循环应该是 table.rows.length-1。现在干净了！

/* 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>