Calculate difference between 2 numbers within HTML and apply a css class

Question

I'm trying to do something which I thought was quite extremely simple, but not having much luck. I have two long lists of scores to compare, each pair sits in its own div. I'm on the lookout for a function which I could specify the div IDs, and have the different reflected in the third div. If the figure is positive, apply one class, and if negative, apply another.

<style>
.positive {
color: green;
}
.negative {
color: red;
}
</style>


<div id = "score">50</div>
<div id = "benchmark">30</div>
<div id = "diff"></div>

and in my javascript:

$(window).ready(function() {  
    $('#diff').html(diff);
});

var diff = calc("score", "benchmark");

function calc(divID1, divID2) {
      div1 = document.getElementById(divID1);
      metric = div1.innerHTML;
      div2 = document.getElementById(divID2);
      benchmark = div2.innerHTML;
      c = Math.abs(a) - Math.abs(b);
// this is the difference here
      return String(c);  
};

I have D3 and JQuery loaded up. The numbers within the columns of divs are dynamically generated through other functions, so I can't hard code the styling.

Answer 1

You have some errors in your code. You can call calc function when the document is ready and handle the result there. I sum it up to this:

$(document).ready(function() {
  //get the result of your calc function
  var diff = calc("score", "benchmark");
  //display the result and add class depend of the returning value
  $('#diff').html(diff).attr("class", diff > 0 ? "positive" : "negative");
});



function calc(divID1, divID2) {
  //get first number
  var div1Num = parseInt($("#" + divID1).text(), 10);
  //get second number
  var div2Num = parseInt($("#" + divID2).text(), 10);
  //make the calculation
  var result = div1Num - div2Num;
  //return the result
  return result;
};

.positive {
  color: green;
}
.negative {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">50</div>
<div id="benchmark">30</div>
<div id="diff"></div>

Another example with negative result:

$(document).ready(function() {
  //get the result of your calc function
  var diff = calc("score", "benchmark");
  //display the result and add class depend of the returning value
  $('#diff').html(diff).attr("class", diff > 0 ? "positive" : "negative");
});



function calc(divID1, divID2) {
  //get first number
  var div1Num = parseInt($("#" + divID1).text(), 10);
  //get second number
  var div2Num = parseInt($("#" + divID2).text(), 10);
  //make the calculation
  var result = div1Num - div2Num;
  //return the result
  return result;
};

.positive {
  color: green;
}
.negative {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">10</div>
<div id="benchmark">30</div>
<div id="diff"></div>

Edit: You can replace parseInt with parseFloat according to your needs.

References

.attr()

Answer 2

You cannot calc() the diff between values of 2 elements when the DOM is not ready yet.

(Your current ready handler isn't performing the actual calculation but only appending the already miscalculated value to some element).

Try this instead:

$(document).ready(function() {
    var diff = Math.abs($("#score").text()) - Math.abs($("#benchmark").text());
    $('#diff').html(diff).addClass(diff > 0 ? 'positive' : 'negative');
});

Also, I changed your $(window).ready() to $(document).ready() instead.

Answer 3

You can use following statement in js to get expected output.

score = jQuery('#score').text();
benchmark = jQuery('#benchmark').text();
if(Math.abs(score) > Math.abs(benchmark))
{
    jQuery('#diff').text('Positive');
    jQuery('#diff').addClass('positive');
}
else
{
     jQuery('#diff').text('Negative');
     jQuery('#diff').addClass('negative');
}

You can check example on this link- http://jsfiddle.net/o3k6u99p/1/