var counter = 0;
function plus() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
function minus() {
if(counter > 0){
counter -= 1;
}
document.getElementById("counter").innerHTML = counter;
}<div class="container">
<div class="input-box">
<button type="button" onclick="minus()" style="font-size: 20px;">-</button>
<p id="counter">0</p>
<button type="button" onclick="plus()">+</button>
</div>
</div>
Run code snippet.container{
display: flex;
align-items: center;
justify-content: center;
}
.input-box{
height: 40px;
width: 100px;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: space-between;
}
button{
background: transparent;
border: 0;
cursor: pointer;
font-size: 15px;
padding: 5px 10px;
}
p{
padding: 5px 10px;
}