Calculation keeps giving a NaN result

Question

I was given a formula where below:

weightdifference = (|crushedWeight - weightBA| / weightBA )* 100%

where weightBA and crushedWeight are values of input texts. I did make a function which stated below:

function calDiffWeight() {
    var weightDS = document.getElementById("weightDS");
    var crushedWeight = document.getElementById("crushedWeight");
    var abs = -1;
    var diffWeight = ((crushedWeight - weightDS) * abs) / weightDS * 100;
    document.getElementById("diffWeight").value = diffWeight;
}

and for the absolute calculation in |crushedWeight - weightBA| how should i do it?

Start with sending the output to the console, especially `weightDS` and `crushedWeight`. Chance is pretty big these values aren't set. — giorgio, Sep 11 '17 at 07:07

Thijs · Accepted Answer · 2017-09-11T07:53:30.607

Based on your code I made the following changes:

You get the elements for weightDS and crushedWeight but you never got the values from those inputs;
Converted the values to floating number before using them for the calculation
Use Math.abs() to make the number absolute.

const
  form = document.getElementById('form');
  
form.addEventListener('submit', onFormSubmit);

function onFormSubmit() {
  event.preventDefault();
  calDiffWeight();
}
function calDiffWeight() {
    var weightDS = parseFloat(document.getElementById("weightDS").value);
    var crushedWeight = parseFloat(document.getElementById("crushedWeight").value);
    var diffWeight = (Math.abs(crushedWeight - weightDS)) / weightDS * 100;
    document.getElementById("diffWeight").value = diffWeight;
}

<form id="form">
  <label>
    WeightDS:
    <input type="number" id="weightDS"/>
  </label>
  <label>
    Crushed Weight:
    <input type="number" id="crushedWeight"/>
  </label>
  
  <button>Calculate</button>
</form>

<p>Result</p>
<input type="number" id="diffWeight"/>

score 1 · Answer 2 · answered Sep 11 '17 at 07:12

In case weightDS is an input box I would recommend document.getElementById("weightDS").value;, because with just getElementById you simply get the dom node. not the value of whatever it may contain.

a bigger and nicer answer is here How do I get the value of text input field using JavaScript?

score 1 · Answer 3 · answered Sep 11 '17 at 07:12

The method document.getElementById(); returns a HTML element. Obviously you can't do maths with a HTML element. So you're propably looking for the value attribute of that HTML element. Since it is a string, parse it to an integer (or float depending on your situation).

var weightDS = parseInt(document.getElementById("weightDS").value);
var crushedWeight = parseInt(document.getElementById(document.getElementById("crushedWeight").value);

score 0 · Answer 4 · answered Sep 11 '17 at 07:18

Use .value after document.getElementById("weightDS")

function calDiffWeight() {
var weightDS = document.getElementById("weightDS").value;
var crushedWeight = document.getElementById("crushedWeight").value;
var abs = -1;
var diffWeight = ((crushedWeight - weightDS) * abs) / weightDS * 100;
document.getElementById("diffWeight").value = diffWeight;
}

score 0 · Answer 5 · answered Sep 11 '17 at 07:22

document.getElementById('elementId'); returns a DOM element. In order to get the value you have to call the value property.

Here is a solution for your example:

var weightDS = parseInt(document.getElementById("weightDS").value);
var crushedWeight = parseInt(document.getElementById(document.getElementById("crushedWeight").value);

Calculation keeps giving a NaN result

5 Answers5