How can i change color text when value less than 0

1

Hello! Everyone please help me ! my function not working!

<script>
    function addColor () { 

      var udata = document.getElementById("centerbox1").value;

      if (udata > 0) {
      document.getElementById("centerbox1").style.color = '#99C262';
      }
      else  
      if (udata < 0)  
      {
      document.getElementById("centerbox1").style.color = '#FF6C60';
      }  
      else  
      if (udata === 0)  
      {
      document.getElementById("centerbox1").style.color = '#1456a8';
      }
   };
</script>
<div class="containerbox">
  <div id="centerbox1">
      <div class="value">
          <p> <span>1</span>

              <br/><span>Utilisation</span>

          </p>
      </div>
  </div>
</div>
2

In this else if statement,
you can do the same thing but change backgroundColor to color.

2 Likes
3

thanks @shimphillip for the answer

4 
else if (udata < 0) { document.getElementById(“centerbox1”).style.color = ‘#FF6C60’; }

or apply both:

let element = document.getElementById(“centerbox1”);
element.style.color = "somecolor";
element.style.backgroundColor = "somecolor";
1 Like
5

thanks @JordanMarsh but my function is not working i don’t where is wrong!

6

Can you paste your changed code?

7

this is last version

<script>
    function addColor () { 

      var udata = document.getElementById("centerbox1").value;

      if (udata > 0) {
      document.getElementById("centerbox1").style.color = '#99C262';
      }
      else  
      if (udata < 0)  
      {
      document.getElementById("centerbox1").style.color = '#FF6C60';
      }  
      else  
      if (udata === 0)  
      {
      document.getElementById("centerbox1").style.color = '#1456a8';
      }
   };
</script>
8

Sorry I hadn’t actually looked over the code much.

So you have a few problems. The first is you can’t access the value of any element except input elements. And you need to target it directly. So you would have to change your

<span>1</span>

to

<input id="centerbox1" value = 1>

make sure to remove the id from your div when doing this to avoid errors

then in your JavaScript you have a function but you never call it. So above
function addColor () {

you would want to call
addColor();

alternatively you could convert it to ES6 and do:
const addColor = () => {function here};

Otherwise it should work. To save yourself some computing time you can save the element like I showed above and reference it directly instead of re-calling the DOM everytime.

let element = document.getElementById(“centerbox1”);
element.style.color = "somecolor";
element.style.backgroundColor = "somecolor";
1 Like
9

Finally my function is working ! Thank you for spending time with me!

1 Like