Javascript - change counter color in js

Errorist
July 1, 2023
210 views
2 votes
5 Answers

i want to change color to green when my counter number were grater than zero and change to red when counter less than zero

const addBtn = document.getElementById(`add`);
const resetBtn = document.getElementById(`reset`);
const minusBtn = document.getElementById(`minus`);

const counter = document.getElementById(`counter`);

if (counter.innerHTML > 0) {
    counter.classList.remove(`white`)
    counter.classList.add(`green`)
}

addBtn.addEventListener(`click`, () => {
    counter.innerHTML = Number(counter.innerHTML) + 1;
});

minusBtn.addEventListener(`click`, () => {
        counter.innerHTML -= 1;
});

resetBtn.addEventListener(`click`, () => {
    counter.innerHTML = 0;
});

what should i do?

Tags: counter javascript

Answers

changed a little bit but should get you closer to what you are looking for:

const addBtn = document.getElementById('add');
const resetBtn = document.getElementById('reset');
const minusBtn = document.getElementById('minus');

const counter = document.getElementById('counter');

if (counter.innerHTML > 0) {
  counter.classList.remove('white');
  counter.classList.add('green');
} else if (counter.innerHTML < 0) {
  counter.classList.remove('white');
  counter.classList.add('red');
}

addBtn.addEventListener('click', () => {
  counter.innerHTML = Number(counter.innerHTML) + 1;
  if (counter.innerHTML > 0) {
    counter.classList.remove('white');
    counter.classList.add('green');
  } else if (counter.innerHTML < 0) {
    counter.classList.remove('white');
    counter.classList.add('red');
  }
});

minusBtn.addEventListener('click', () => {
  counter.innerHTML = Number(counter.innerHTML) - 1;
  if (counter.innerHTML > 0) {
    counter.classList.remove('white');
    counter.classList.add('green');
  } else if (counter.innerHTML < 0) {
    counter.classList.remove('white');
    counter.classList.add('red');
  } 
});

resetBtn.addEventListener('click', () => {
 counter.innerHTML = 0;
  counter.classList.remove('green', 'red');
  counter.classList.add('white');
});

Create a function that checks for the value and changes the color whenever you click on addBtn, minusBtn, and resetBtn.

const addBtn = document.getElementById("add");
const resetBtn = document.getElementById("reset");
const minusBtn = document.getElementById("minus");
const counter = document.getElementById("counter");

addBtn.addEventListener("click", () => {
    counter.innerHTML = Number(counter.innerHTML) + 1;
    checkValue();
});

minusBtn.addEventListener("click", () => {
    counter.innerHTML -= 1;
    checkValue();
});

resetBtn.addEventListener("click", () => {
    counter.innerHTML = 0;
    checkValue();
});

function checkValue() {
    if (counter.innerHTML > 0) {
        counter.style.color = "green";
    } else if (counter.innerHTML < 0) {
        counter.style.color = "red";
    }
}

<button id="add">Add</button>
<button id="reset">Reset</button>
<button id="minus">Minus</button>
<div id="counter"></div>

You can define a separate function to change the count, and call it in each event handler. This function can then handle setting the color.

function changeCount(val, upd=false) {
    const newCount = upd ? val : +counter.textContent + val;
    counter.textContent = newCount;
    counter.classList.toggle('green', newCount > 0);
    counter.classList.toggle('red', newCount < 0);
}
addBtn.addEventListener('click', () => {
    changeCount(1);
});
minusBtn.addEventListener('click', () => {
    changeCount(-1);
});
resetBtn.addEventListener('click', () => {
    changeCount(0, true);
});

Create a function and update as per your requirement

<button id="add">Add</button>
<button id="reset">Reset</button>
<button id="minus">Minus</button>
<div id="counter"></div>

<script>
  const addBtn = document.getElementById('add');
  const resetBtn = document.getElementById('reset');
  const minusBtn = document.getElementById('minus');
  const counter = document.getElementById('counter');

  function updateCounterColor() {
    const counterValue = Number(counter.innerHTML);
    
    if (counterValue > 0) {
      counter.style.color = 'green';
    } else if (counterValue < 0) {
      counter.style.color = 'red';
    } else {
      counter.style.color = 'black';
    }
  }

  addBtn.addEventListener('click', () => {
    counter.innerHTML = Number(counter.innerHTML) + 1;
    updateCounterColor();
  });

  minusBtn.addEventListener('click', () => {
    counter.innerHTML = Number(counter.innerHTML) - 1;
    updateCounterColor();
  });

  resetBtn.addEventListener('click', () => {
    counter.innerHTML = 0;
    updateCounterColor();
  });

  updateCounterColor();
</script>

Each time you click a button you have to check if the value is >/< 0 so you need to use that If statement in all your eventListeners and it’s better to create a function that can do that so that you keep your code clean.

      const addBtn = document.getElementById("add");
      const resetBtn = document.getElementById("reset");
      const minusBtn = document.getElementById("minus");
      const counter = document.getElementById("counter");

      const checkCounterValue=()=>{
            if (counter.innerHTML > 0) {
                counter.classList.remove("white", "red")
                counter.classList.add("green")
            }else if(counter.innerHTML < 0 ){
                counter.classList.remove("green", "white")
                counter.classList.add("red")
            }
      }

      addBtn.addEventListener("click", () => {
          counter.innerHTML = Number(counter.innerHTML) + 1;
          checkCounterValue()
      });

      minusBtn.addEventListener("click", () => {
              counter.innerHTML -= 1;
              checkCounterValue()
      });

      resetBtn.addEventListener("click", () => {
          counter.innerHTML = 0;
          counter.classList.remove("green", "red")
          counter.classList.add("white")
      });

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – change counter color in js

Answers