Change font colour based on value

JavaScript
#1

Hey guys. I’ve started a mini project today to help some of the javascript lessons sink in. I’ve managed to successfully build a counter but I’m having trouble changing the font colour based on the counter value. I’m trying to change the font colour as follows: orange = 0, red =< -1, green => 1. I’m staring at this code and I can’t work out what I’ve done wrong. Help would be greatly appreciated :slight_smile:

Here’s my code:

// counter 
let count = 0;

let btndisplay = document.querySelector('.counter-value');
let btnadd = document.querySelector('.btn-add');
let btnminus = document.querySelector('.btn-minus');
let btnreset = document.querySelector('.btn-reset');


btnadd.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

btnminus.addEventListener("click",()=>{
    count--;
    updateDisplay()
}) ;

function updateDisplay(){
    btndisplay.innerHTML = count;
};

btnreset.addEventListener("click", () => {
    count = 0;
    updateDisplay()
}) ;


updateDisplay();

let changeColor = function(btndisplay){

  if(count => 1){
    btndisplay.style.color = 'green';
  } else if(count = 0){
    btndisplay.style.color = 'orange';
  } else if(count =< 1){
    btndisplay.style.color = 'red';
  }

};
#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#3

Thanks! I was just working out how to do this.

#4

where are you calling the changeColor function?

#5

Apologies! I forgot to include the last line of code. I was calling the changeColor function at the end. Here’s my current code:

// counter 
let count = 0;

let btndisplay = document.querySelector('.counter-value');
let btnadd = document.querySelector('.btn-add');
let btnminus = document.querySelector('.btn-minus');
let btnreset = document.querySelector('.btn-reset');


btnadd.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

btnminus.addEventListener("click",()=>{
    count--;
    updateDisplay()
}) ;

function updateDisplay(){
    btndisplay.innerHTML = count;
};

btnreset.addEventListener("click", () => {
    count = 0;
    updateDisplay()
}) ;


updateDisplay();

let changeColor = function(){

  if(count >= 1){
    btndisplay.style.color = 'green';
  } else if(count === 0){
    btndisplay.style.color = 'orange';
  } else if(count <= -1){
    btndisplay.style.color = 'red';
  }

};

changeColor();
#6

you are calling changeColor only when the code load for the first time and then never again. When do you want to change color?

#7

Thanks for you help @ilenia, I released i included the changeColor function in the wrong place. I needed to include as part of the updateDisplay function so the colours change when the count is in + & - values. Its working now. Here’s the updated code:

// counter 
let count = 0;

let btndisplay = document.querySelector('.counter-value');
let btnadd = document.querySelector('.btn-add');
let btnminus = document.querySelector('.btn-minus');
let btnreset = document.querySelector('.btn-reset');


btnadd.addEventListener("click",()=>{
    count++;
    updateDisplay();   
}) ;

btnminus.addEventListener("click",()=>{
    count--;
    updateDisplay();
}) ;


function updateDisplay(){
    btndisplay.innerHTML = count;
    changeColor();
};

btnreset.addEventListener("click", () => {
    count = 0;
    updateDisplay();
    
   }) ;


updateDisplay();

// change colour based on counter value 

function changeColor() {

  if (count >= 1){
    btndisplay.style.color = 'green';
  } else if (count == 0){
    btndisplay.style.color = 'orange';
  } else if (count <= -1){
    btndisplay.style.color = 'red';
  }

};
#8