admin管理员组文章数量:1323225
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.
Share Improve this question edited Nov 3, 2015 at 10:27 Alex Char 33.2k9 gold badges51 silver badges71 bronze badges asked Nov 3, 2015 at 9:55 RyanRyan 4272 silver badges15 bronze badges 1-
1
You probably meant
$(document).ready()
instead of$(window).ready()
– haim770 Commented Nov 3, 2015 at 9:57
3 Answers
Reset to default 6You 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
版权声明:本文标题:javascript - Calculate difference between 2 numbers within HTML and apply a css class - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742077517a2419495.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论