JavaScript Increment Decrement Button

This JavaScript code snippet helps you to create an increment and decrement button. It creates variables to store references to the HTML elements for the counter, increment button, and decrement button. It also initializes a variable “number” to 0.

The “changeColor” function is used to determine what color the number should be displayed in based on its value. Finally, the code adds event listeners to the increment and decrement buttons so that when they are clicked, the number is updated, displayed on the webpage, and its color is changed using the “changeColor” function.

How to Create JavaScript Increment Decrement Button

Create the HTML structure for the counter as follows:

<div class="main-project-wrapper">
    <div class="project-6-page-wrapper">
        <h2> Counter Project</h2>
        <div class="project-6-wrapper">
            <div class="counter-box-wrapper">
                <div class="counter-number" id="counter-placeholder"> 0 </div>
                <button class="count-btns" id="btn-increment"> Increment </button>
                <button class="count-btns" id="btn-decrement"> Decrement </button>
            </div>
              <address id="h-q-copyright"> Project By @Yvana <a class="yvana" href="https://yvana.org" target="_blank"> https://yvana.org </a></address>
        </div>
      
    </div>
  
</div>

Style the counter using the following CSS styles. These CSS rules are optional, you can define your own CSS according to your needs.

/* Project 6 */

.project-6-page-wrapper{
  background-color: rgb(56, 23, 4);
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

.project-6-page-wrapper >h2{
  padding: 10px 35px;
  margin-bottom: 10px;
  border: 1px solid rgb(233, 201, 174);
  text-align: center;
  color: rgb(192, 231, 243);
  font-family: Arial, Helvetica, sans-serif;
}


.project-6-wrapper{
  width: 100%;
  height: 400px;
  background-color: rgb(202, 114, 73);
}

.counter-box-wrapper{
  width: auto;
  margin: 50px;
  height: 300px;
  background-color: rgb(192, 166, 137);
  box-shadow: 0px 0px 10px 10px rgb(71, 52, 22);
  text-align: center;
}

.cd__main{
display: block !important;
}
.counter-number{
  font-size: 150px;
  color: white;
}

.count-btns{
  padding: 10px;
  width: auto;
  background-color: rgb(85, 53, 2);
  font-size: 18px;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 5px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  border: 2px solid rgb(1, 250, 237);
  color: white;
  outline: none;
}

.count-btns:hover{
  background-color: rgb(133, 70, 42);
}

#h-q-copyright{
  margin: 10px;
  color: green;
  text-align: center;
}

.yvana{
  color: blue;
}

Finally, add the following JavaScript function to activate increment and decrement functionality.

// Declaring variables for each IDS
var counterPlaceHolder = document.getElementById("counter-placeholder");
var btnIncrement = document.getElementById("btn-increment");
var btnDecrement = document.getElementById("btn-decrement");

var number = 0;

// Function to change color of the number 
// If number is less than 0 color is red, if more than 0 color is green and if 0, color is white.

function changeColor(number){
    var color = "";
    if(number < 0 ){
        color = "red";
    }else if (number > 0 ){
        color = "green";
    }else{
        color="white";
    }
    return color;
}

btnIncrement.addEventListener("click", function(){
    number++;
    counterPlaceHolder.innerHTML = number;
    counterPlaceHolder.style.color = changeColor(number);
});

btnDecrement.addEventListener("click", function(){
    number--;
    counterPlaceHolder.innerHTML = number;
    counterPlaceHolder.style.color = changeColor(number);
});

That’s all! hopefully, you have successfully created an increment decrement button in JavaScript. If you have any questions or suggestions, feel free to comment below.