javascript - Calculate difference between 2 numbers within HTML and apply a css class - Stack Overflow

admin管理员组

文章数量:1325137

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 pare, 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.

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 pare, 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 3, 2015 at 10:27 Alex Char 33.2k99 gold badges5151 silver badges7171 bronze badges asked Nov 3, 2015 at 9:55 RyanRyan 42722 silver badges1515 bronze badges 1

• 1 You probably meant $(document).ready() instead of $(window).ready() – haim770 Commented Nov 3, 2015 at 9:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./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./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()

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.

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/o3k6u99p/1/

本文标签： javascriptCalculate difference between 2 numbers within HTML and apply a css classStack Overflow