How can I change the color in javascript depending of object value

Question

I have a problem that I don´t know how to solve. The script below displays stocks and its current value. One thing i want to add is the color green if the stock has a positive value and red if the stock has a negative value.

How can change the color of the div "value" for each row depending on the current value?

$(document).ready(function stocks() {

  var value = "";
  var name = "";
  var substring = "-";

  $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
    json.forEach(function(v) {

      //if(v.cp.includes(substring)){
      //}
      //
      //else{
      //} 

      name += v.t + "<br>";
      value += v.cp + " %" + "<br>";

      document.getElementById('name').innerHTML = name;
      document.getElementById('value').innerHTML = value;
    });
    setTimeout(stocks, 10000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div id="name" style="float:left ; padding-right:10px"></div>
  <div id="value" style="text-align:right; width:140px"></div>
</div>

What colour value? Do you mean myElement.style.color = '#ccc'? — evolutionxbox
– evolutionxbox, Commented Apr 19, 2017 at 8:35
Move the .innerHTML = ... parts out of the .forEach() "loop". No need to change the DOM for each element if only the value of name/value after the last element is relevant. — Andreas
– Andreas, Commented Apr 19, 2017 at 8:40

Богдан Денисюк · Accepted Answer · 2017-04-19 08:45:06Z

1

You can change background style of an element on page by using this construction:

document.getElementById('value').style.background = 'here is your color'.

So, you can just replace your

"document.getElementById('value').innerHTML = value;"

by this:

const valueElement = document.getElementById('value');
const color = (v.cp > 0) ? 'greeen' : 'red';
valueElement.innerHTML = value;
valueElement.style.background = color;

Instead of changing "background" property you are free to change any other (color, width etc)

answered Apr 19, 2017 at 8:45

Богдан Денисюк

594 bronze badges

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

Comments

Chiller · Accepted Answer · 2017-04-19 08:50:04Z

you can define a variable color and wrap the value in a span and set the span the color according to the value

see the code bellow

$(document).ready(function stocks() {

  var value = "";
  var name = "";
  var substring = "-";

  $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
      json.forEach(function(v) {

          //if(v.cp.includes(substring)){
          //}
          //
          //else{
          //} 

          var color = 'green';
          if (v.cp < 0) {
            color = 'red';
          }

          name += v.t + "<br>";
          value += '<span style="color:' + color + '">' + v.cp + " %" + "</span><br>";

          document.getElementById('name').innerHTML = name;
          document.getElementById('value').innerHTML = value;




      }); setTimeout(stocks, 10000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div id="name" style="float:left ; padding-right:10px"></div>
  <div id="value" style="text-align:right; width:140px"></div>
</div>

Weedoze · Accepted Answer · 2017-04-19 08:39:48Z

0

You can call yourElement.style.color and set it to green or red

var value = "";
var name = "";
var substring = "-";

var nameElement = document.getElementById('name');
var valueElement = document.getElementById('value');

$.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
  json.forEach(function(v) {
    name += v.t + "<br>";
    value += v.cp + " %" + "<br>";
     
    valueElement.style.color = v.cp < 0 ? "red" : "green";
    
    nameElement.innerHTML = name;
    valueElement.innerHTML = value;
  });
  setTimeout(stocks, 10000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div id="name"></div>
<div id="value"></div>

answered Apr 19, 2017 at 8:39

Weedoze

14k2 gold badges38 silver badges65 bronze badges

2 Comments

Pugazh Over a year ago

This won't work. You would need to style each element individually.

Pugazh Over a year ago

Try changing https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=? to https://finance.google.com/finance/info?client=ig&q=NDRO,HM-B,AAPL&callback=? Even positive number will get a red color

Pugazh · Accepted Answer · 2017-04-19 08:51:12Z

Just parseFloat the value v.cp if it's greater than zero, apply green else apply red. Check below example.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script>
    $(document).ready(function stocks() {

      var value = "";
      var name = "";
      var color = "";

      $.getJSON("https://finance.google.com/finance/info?client=ig&q=NDRO,HM-B,AAPL&callback=?", function(json) {

        json.forEach(function(v) {
          if (parseFloat(v.cp) > 0)
            color = 'green';
          else
            color = 'red';

          name += v.t + "<br>";
          value += "<span style='color:" + color + "'>" + v.cp + " %</span><br>";

          document.getElementById('name').innerHTML = name;
          document.getElementById('value').innerHTML = value;

        });
        setTimeout(stocks, 10000);
      });
    });
  </script>
</head>

<body>
  <div>
    <div id="name" style="float:left ; padding-right:10px">
    </div>
    <div id="value" style="text-align:right; width:140px">
    </div>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

How can I change the color in javascript depending of object value

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related