What would be a better way (function) to change the color of the number after onclick?

Question

I am still fairly new to JavaScript and am trying to deepen my understanding of it through mini projects.

In this counter project, I have managed to get the result what I want:

• After clicking the "add" button, the counter increment would increase and change color to green.
• After clicking the "subtract" button, the counter increment would decrease and change color to red.

Below would be my JavaScript code:

//create variables to hold the HTML selectors 
var counterDisplay = document.querySelector('.counter-display');
var counterMinus = document.querySelector('.counter-minus');
var counterPlus = document.querySelector('.counter-plus');
//create variable for the counter 
//what we'll use to add and subtract from 
var count = 0;


//create a function to avoid code redundancy 
function updateDisplay(){
  counterDisplay.innerHTML = count;
};

function toGreen(){
  document.querySelector('.counter-display').style.color = "green";
};
function toRed(){
  document.querySelector('.counter-display').style.color = "red";
};

/*-------------------------------------------*/

updateDisplay();

//EventListeners
counterPlus.addEventListener("click", () =>{
  count++;
  updateDisplay();
  toGreen();
});

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

I separated the color functions but I feel like there's a cleaner way to write this code i.e conditionals like if statements, however, as I'm still learning I don't fully know how to implement this.

**As mentioned, I'm still learning so a thorough explanation/laymen's terms is greatly appreciated!

Please let me know for any clarifications or if more info is needed!

Thank you in advance!

EDIT: Thank you those who have taken the time to help me in sharing their solutions!

Answer 1

The code you wrote is quite long but it does the job

I'm not sure what do you want exactly, but here are few notes :

• Use HTML onclick Event instead:
  Instead of adding event listener from javascript you can add it in the HTML code like so: <button onclick="myFunction()">Click me</button>, and whenever the button is clicked myFunction() will be called.
  You can also pass the button as a parameter, for example
  

function myFunction(element) {
  element.style.backgroundColor = "red";
}

<button onclick="myFunction(this)">Click me</button>

• Use let instead of var:
  Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).
  find more info here: What's the difference between using “let” and “var”?

Answer 2

You need to make the following few changes:

• Make use of let and const. If it doesn't change its value in the future then use const else let.
• You can create an array of buttons (in the below example buttons) so that you can loop over and add event listener on all buttons. So that you don't need to add an event listener on each one of the buttons.
• You can use data attribute to recognize which type of button it is.
• Get rid of multiple functions toRed or toGreen, instead make a single function that will change the color of text with only one function changeTextColor.
• If you just need to change the text of the HTML element then better to use textContent in updateDisplay function.

see innerText vs innerHTML vs label vs text vs textContent vs outerText

//create variables to hold the HTML selectors
const counterDisplay = document.querySelector(".counter-display");
const counterMinus = document.querySelector(".counter-minus");
const counterPlus = document.querySelector(".counter-plus");
//create variable for the counter
//what we'll use to add and subtract from
let count = 0;

//create a function to avoid code redundancy
function updateDisplay() {
  counterDisplay.textContent = count;
}

function changeTextColor(color) {
  counterDisplay.style.color = color;
}

/*-------------------------------------------*/

//EventListeners
const buttons = [counterMinus, counterPlus];
buttons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const btnType = e.target.dataset.type;
    if (btnType === "sub") {
      count--;
      changeTextColor("red");
    } else {
      count++;
      changeTextColor("green");
    }
    updateDisplay();
  });
});

.counter-display {
  background-color: black;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: whitesmoke;
}

.button-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.button-container>* {
  padding: .75rem 3rem;
  font-size: 2rem;
  border: none;
  border-radius: 4px;
}

.counter-minus {
  background-color: red;
}

.counter-plus {
  background-color: green;
}

<div class="counter-display"> 0 </div>
<div class="button-container">
  <button class="counter-minus" data-type="sub">-</button>
  <button class="counter-plus" data-type="add">+</button>
</div>

Answer 3

How about something more app based? You can break your whole thing down into a couple key components with a little glue get something that you can easily build on. Its not very different than what you already have, it just sprinkles in some tried and true patterns.

const widget = (element) => {
  const $minus = element.querySelector('.counter-minus');
  const $plus = element.querySelector('.counter-plus');
  const $display = element.querySelector('.counter-display');
  
  let state = {
    color: 'black',
    count: 0
  };
  
  const update = (next) => {
    state = next;
    render();
  };
  
  const render = () => {
     $display.innerText = state.count;
     $display.style.color = state.color;
  };
  
  const onMinusClick = () => {
    update({ color: 'red', count: state.count - 1 });
  };
  
  const onPlusClick = () => {
    update({ color: 'green', count: state.count + 1 });
  };
  
  $minus.addEventListener('click', onMinusClick);
  $plus.addEventListener('click', onPlusClick);
  
  render();
  
  return () => {
    $minus.removeEventListener('click', onMinusClick);
    $plus.removeEventListener('click', onPlusClick);
  };
};

widget(document.querySelector('#app1'));
widget(document.querySelector('#app2'));
widget(document.querySelector('#app3'));

div {
  margin-bottom: .5rem;
}

<div id="app1">
  <button class="counter-minus">-</button>
  <span class="counter-display"></span>
  <button class="counter-plus">+</button>
</div>

<div id="app2">
  <button class="counter-minus">-</button>
  <span class="counter-display"></span>
  <button class="counter-plus">+</button>
</div>

<div id="app3">
  <button class="counter-minus">-</button>
  <span class="counter-display"></span>
  <button class="counter-plus">+</button>
</div>

1. First thing you probably notice is that i have multiple instance running of my app. I can do this because I dont rely on global state. You can see that when you call widget, it holds its own variables.

2. I have state as an object and the only thing that can write to state is the update function. You had something very similar except i combined my state into a single variable and have 1 function in charge of writing to state, and then reacting to it i.e. rendering.

3. Then I have some event handlers being attached that are just calling update with how they want the state to look. This of course triggers a render to keep the ui consistent with the state. This 1 way data flow is very important to keep code clear. The update function can be more sophistacted and do things like except partial state values and spread state = { ...state, ...next}. it can get pretty crazy.

4. Lasty i return a function. You can return anything in here, you might want to return an api for a user to interact with you widget with. For example you have a calendar and you want to be able to set the date outside of the widget. You might return { setDate: (date) => update({ date }) } or something. However i return a function that will clean up after the widgets by removing event listeners so garbage collection can reclaim any memory i was using.