Calculate the difference between two numbers in HTML and apply the css class

Question

I am trying to do something that, in my opinion, was very simple, but not very successful. I have two long lists of ratings for comparison, each pair sitting in its own div. I am in search of a function that I could specify div ids, and have a different reflection in the third div. If the indicator 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 loaded D3 and jQuery. The numbers in the divs columns are dynamically generated through other functions, so I cannot hard code the style.

Answer 1

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

(Your current ready handler does not perform the actual calculation, but only adds the already calculated 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'); }); 

In addition, I replaced $(window).ready() with $(document).ready() .

Answer 2

You have some errors in the code. You can call calc function when document ready and process the result there. To summarize 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 a 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 to suit your needs.

References

. attr ()

Answer 3

You can use the following statement in js to get the expected result.

 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 the example at this link - http://jsfiddle.net/o3k6u99p/1/