Question 180075 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Does .text() in jQuery return the text in a DIV as expected?

I’m working on a tool that lets the user <select> a space type, e.g., office, warehouse, storage, etc., and calculate the kWh usage, kWh cost, fuel usage, fuel cost2, per square foot. The fuel typew is naturla gas and the other is everything else.

The value of an option holds various values depending on the space type. For example, an Office might have:

<option value="21|0.099|25|0.091">Office</option>

This is then split into an array using the .split() function, e.g.,

$("#space-type-1 option:selected").val().split("|");

I have created a table using display:table that has 5 rows and 5 columns

Table header are

Space Type Floor Area kWh Use kWh Cost Fuel Use Fuel Cost
Row 1
Row 2
Row 3
Total for the last for columns

The first column calculates fine and obviously the total is correct. Here’s my the code:

// Calculate total kWh Usage
var r1 = parseFloat(stVal[0] * fa1);
var r2 =
  $("#kwh-used-2").text() > 0
    ? parseFloat($("#kwh-used-2").text())
    : parseFloat(0);
var r3 =
  $("#kwh-used-3").text() > 0
    ? parseFloat($("#kwh-used-3").text())
    : parseFloat(0);
var tkwhUsed = (r1 + r2 + r3).toLocaleString("en-US", {
  style: "decimal",
  maximumFractionDigits: "0",
});
$("#total-kwh-used").text(tkwhUsed);

// Calculate total kWH Cost
r1 = parseFloat(stVal[1] * fa1);
r2 =
  $("#kwh-cost-2").text() > 0
    ? parseFloat($("#kwh-cost-2").text())
    : parseFloat(0);
r3 =
  $("#kwh-cost-3").text() > 0
    ? parseFloat($("#kwh-cost-3").text())
    : parseFloat(0);
var tkwhCost = (r1 + r2 + r3).toLocaleString("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: "0",
});
$("#total-kwh-cost").text(tkwhCost);

// Calculate total fuel used
r1 = (parseFloat(stVal[2] * 1037) / 100000) * fa1;
r2 =
  $("#fuel-used-2").text() > 0
    ? parseFloat($("#fuel-used-2").text())
    : parseFloat(0);
r3 =
  $("#fuel-used-3").text() > 0
    ? parseFloat($("#fuel-used-3").text())
    : parseFloat(0);
var tfuelUsed = (r1 + r2 + r3).toLocaleString("en-US", {
  style: "decimal",
  maximumFractionDigits: "0",
});
$("#total-fuel-used").text(tfuelUsed);

// Calculate total fuel cost
r1 = parseFloat(stVal[3] * fa1);
r2 =
  $("#fuel-cost-2").text() > 0
    ? parseFloat($("#fuel-cost-2").text())
    : parseFloat(0);
r3 =
  $("#fuel-cost-3").text() > 0
    ? parseFloat($("#fuel-cost-3").text())
    : parseFloat(0);
var tfuelCost = (r1 + r2 + r3).toLocaleString("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: "0",
});
$("#total-fuel-cost").text(tfuelCost);

I then enter the data for the second row, it too calculates fine. But the total doesn’t.
,
The first row totals are 9,400, $1,000, 2000, $600
The second row totals are fine, but I’m not getting the 9,400. I either get 9 or 400 or 0, but not the 9400.

The totals should be 11,050, $1198, 2,299, $649

The totals I’m getting aren’t anywhere where they need to be.

Here’s the code for the totals for the second row.

$("#floor-area-2").blur(function () {
  //alert("Check results.");
  var stText = $("#space-type-2 option:selected").text();
  var stVal = $("#space-type-2 option:selected").val().split("|");
  var stId = $("#space-type-2").attr("id");
  var fa1 =
    $("#floor-area-1").val() > 0 ? parseFloat($("#floor-area-1").val()) : 0;
  var fa2 =
    $("#floor-area-2").val() > 0 ? parseFloat($("#floor-area-2").val()) : 0;
  var fa3 =
    $("#floor-area-3").val() > 0 ? parseFloat($("#floor-area-3").val()) : 0;

  // Total the square of all space types
  var totFloorArea = fa1 + fa2 + fa3;
  var totPctTotal =
    parseFloat((fa1 / totFloorArea) * 100) +
    parseFloat((fa1 / totFloorArea) * 100) +
    parseFloat((fa1 / totFloorArea) * 100);

  // Assign the percentage of total for each space type
  $("#pct-total-1").text(
    parseFloat((fa1 / totFloorArea) * 100).toLocaleString("en-US", {
      style: "decimal",
      maximumFractionDigits: "2",
    })
  );
  $("#pct-total-2").text(
    parseFloat((fa2 / totFloorArea) * 100).toLocaleString("en-US", {
      style: "decimal",
      maximumFractionDigits: "2",
    })
  );
  $("#pct-total-3").text(
    parseFloat((fa3 / totFloorArea) * 100).toLocaleString("en-US", {
      style: "decimal",
      maximumFractionDigits: "2",
    })
  );
  var pt1 = parseFloat((fa1 / totFloorArea) * 100);
  var pt2 = parseFloat((fa2 / totFloorArea) * 100);
  var pt3 = parseFloat((fa3 / totFloorArea) * 100);
  var tpt = pt1 + pt2 + pt3;
  $("#total-floor-area").text(parseInt(totFloorArea));
  $("#total-pct-total").text(
    tpt.toLocaleString("en-US", {
      style: "decimal",
      maximumFractionDigits: "2",
    })
  );

  // Calculate and display utility usage and cost
  var kwhUsed2 = (stVal[0] * fa2).toLocaleString("en-US", {
    style: "decimal",
    maximumFractionDigits: "0",
  });
  $("#kwh-used-2").text(kwhUsed2);
  var kwhCost2 = (stVal[1] * fa2).toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: "0",
  });
  $("#kwh-cost-2").text(kwhCost2);

  if ($("#fuel-type option:selected").text() == "Natural Gas") {
    var fuelUsed2 = (
      (parseFloat(stVal[2] * 1037) / 100000) *
      fa2
    ).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: "0" });
    $("#fuel-used-2").text(fuelUsed2);
    var fuelCost2 = parseFloat(stVal[3] * fa2).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: "0",
    });
    $("#fuel-cost-2").text(fuelCost2);
  } else {
    var fuelUsed2 = parseFloat(stVal[4] * fa2).toLocaleString("en-US", {
      style: "decimal",
      maximumFractionDigits: "0",
    });
    $("#fuel-cost-2").text(fuelUsed2); // will add fuel oil
    var fuelCost2 = parseFloat(stVal[5] * fa2).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: "0",
    });
    $("#fuel-other-2").text(fuelCost2); // at later date
  }

  // Calculate total kWh Usage
  var x1 = $("#total-kwh-used").val();
  var x2 = (parseFloat(stVal[2] * 1037) / 100000) * fa2;
  var x3 = (x1 + x2).toLocaleString("en-US", {
    style: "decimal",
    maximumFractionDigits: "0",
  });
  $("#total-kwh-used").text(x3);

  // Calculate total kWH Cost
  x1 =
    $("#kwh-cost-1").text() > 0
      ? parseFloat($("#kwh-cost-1").text())
      : parseFloat(0);
  x2 = parseFloat(stVal[1] * fa2);
  x3 =
    $("#kwh-cost-3").text() > 0
      ? parseFloat($("#kwh-cost-3").text())
      : parseFloat(0);
  var tkwhCost = (x1 + x2 + x3).toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: "0",
  });
  $("#total-kwh-cost").text(tkwhCost);

  // Calculate total fuel used
  x1 =
    $("#fuel-used-1").text() > 0
      ? parseFloat($("#fuel-used-1").text())
      : parseFloat(0);
  x2 = (parseFloat(stVal[2] * 1037) / 100000) * fa2;
  x3 =
    $("#fuel-used-3").text() > 0
      ? parseFloat($("#fuel-used-3").text())
      : parseFloat(0);
  var tfuelUsed = (x1 + x2 + x3).toLocaleString("en-US", {
    style: "decimal",
    maximumFractionDigits: "0",
  });
  $("#total-fuel-used").text(tfuelUsed);

  // Calculate total fuel cost
  x1 =
    $("#fuel-cost-1").text() > 0
      ? parseFloat($("#fuel-cost-1").text())
      : parseFloat(0);
  x2 = parseFloat(stVal[3] * fa2);
  x3 =
    $("#fuel-cost-3").text() > 0
      ? parseFloat($("#fuel-cost-3").text())
      : parseFloat(0);

  var tfuelCost = (x1 + x2 + x3).toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: "0",
  });
  $("#total-fuel-cost").text(tfuelCost);
});

Please tell me where and I am screwing up, and how I might fix it?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was trying to add the columns in the tables AFTER I had converted the numerical numbers used in the calculations to strings. For example, the first row would calculate correctly and display as intended.

    When I tried adding the values in the second row to those of the first row, I wasn't converting the string back to a number before trying to add the two values. This was causing the majority of my problems. Thank you, @Phil, for letting me know that.

    I liked and incorporated the suggestion from @PJaoko that streamlined some of the logic. Thank you, PJaoko.

    I've recoded the scripting taking into account the suggestions here. I dont foresee additional isues moving forward. Thanks for everyone's help and sorry for the long and hard to read code.


  2. 0

    The code is not very easy to read or follow, due to all the parseFloat(), text() and toLocalString() functions everywhere. The problem is all your program data is hidden in HTML strings, so you have to keep converting types all over the place. A cleaner approach is to keep all your data in JS, then just use HTML to render/display. For example:

    <option value="option1">Office</option>

        const options = {
      option1: {area:21, kwhUse:0.099, kwhCost:25.00, fuelCost: 0.091 },
      option2: {....etc}
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search