Comparing negative values does not work properly in Javascript

Question

I have the following code which changes the background color of a table data cell according to the numerical value inside the cell.
While all other comparisons work as expected, (val<(-3000)) comparison never enters the block.
This is the code:

//Change Background Color for all P/L values
$(".PLcolors").each(function(index, value) {

  var val = Number(parseFloat($(this).text(), 10));

  console.log("value is " + val);

  if (val === 0) {
    $(this).css("background-color", "#DCDCDC");
  } else if ((val => -3000) && (val <= 3000)) {
    $(this).css("background-color", "#F0E68C");
  } else if (val < (-3000)) {
    $(this).css("background-color", "#FF0000");
  } else if ((val > 3000)) {
    $(this).css("background-color", "#008000");
  }
});

the type of val variable is number.

parseFloat takes only 1 argument. What gives you console.log($(this).text())? — Sergio
– Sergio, Commented Jul 14, 2017 at 11:51
@amoeba Sorry I cannot share a Fiddle since data are fetched live from a local webserver. — vkoukou
– vkoukou, Commented Jul 14, 2017 at 11:57
@Sergio The console gives back the value -4282 exactly without any additional characters. The operation runs for multiple values so the format does not seem to be the main issue since for positive numbers > 3000 the comparison and coloring is performed as expected. — vkoukou
– vkoukou, Commented Jul 14, 2017 at 11:59

Erazihel · Accepted Answer · 2017-07-14 11:59:09Z

2

There is an error inside your JS, you set => instead of >=. Fix it to:

else if (val >= -3000 && val <= 3000) {

//Change Background Color for all P/L values
$(".PLcolors").each(function(index, value) {

  var val = Number(parseFloat($(this).text(), 10));

  console.log("value is " + val);

  if (val === 0) {
    $(this).css("background-color", "#DCDCDC");
  } else if (val >= -3000 && val <= 3000) {
    $(this).css("background-color", "#F0E68C");
  } else if (val < -3000) {
    $(this).css("background-color", "#FF0000");
  } else if ((val > 3000)) {
    $(this).css("background-color", "#008000");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="PLcolors">1</li>
  <li class="PLcolors">-3001</li>
  <li class="PLcolors">3001</li>
  <li class="PLcolors">0</li>
</ul>

answered Jul 14, 2017 at 11:59

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vkoukou Over a year ago

Oh my god! Such a small typo! Thanks for pointing it out! Issue solved everything works as expected now!

Collectives™ on Stack Overflow

Comparing negative values does not work properly in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related