Error in creating Increment Decrement Counter in HTML Using JavaSCript

April 19, 2022

I have been trying to write a code to create a simple increment and decrement counter in html using javascript and i am not able figure out what`s going wrong!
i’m attaching the snippets here, please help me if you can!

var i=0;
const plus = function(){
    i += 1;
    document.getElementById("demo").innerText = i;
}
const minus = function(){
    i += 1;
    document.getElementById("demo").innerText = i;
}

.container{
height: 400px;
width: 400px;
background-color: rgb(240, 168, 221);
}
.container2{
    text-align: center;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

<!doctype html>
<html>
    <head>
        <title> interactiveCart.io </title>
        <link rel="stylesheet" href="app.css">
        <script src="https://kit.fontawesome.com/ecf5b6c191.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <h1> Interactive Cart For Ecommerce Store </h1>
        <div class="container">
            <img class="center" src="shopping-cart.png" alt="loading" height="300px" width="300px" >
        </br>
        <div class="container2">
            <script src="app.js"></script>
            <button class="button1" onclick="plus();"> Add <i class="fa-solid fa-circle-plus"></i> 
            </button>
            <button class="button2" onclick="minus();"> Remove <i class="fa-solid fa-circle-minus"></i> 
            </button>
            </div> </div>
    </body>
</html>

>Solution :

You need to add element with id "demo"

And change the minus function with -= operator.

var i=0;
const plus = function(){
    i += 1;
    document.getElementById("demo").innerText = i;
}
const minus = function(){
    i -= 1;
    document.getElementById("demo").innerText = i;
}

.container{
height: 400px;
width: 400px;
background-color: rgb(240, 168, 221);
}
.container2{
    text-align: center;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

<!doctype html>
<html>
    <head>
        <title> interactiveCart.io </title>
        <link rel="stylesheet" href="app.css">
        <script src="https://kit.fontawesome.com/ecf5b6c191.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <h1> Interactive Cart For Ecommerce Store </h1>
        <div class="container">
            <img class="center" src="shopping-cart.png" alt="loading" height="300px" width="300px" >
            <span id="demo"></span>
        </br>
        <div class="container2">
            <script src="app.js"></script>
            <button class="button1" onclick="plus();"> Add <i class="fa-solid fa-circle-plus"></i> 
            </button>
            <button class="button2" onclick="minus();"> Remove <i class="fa-solid fa-circle-minus"></i> 
            </button>
            </div> </div>
    </body>
</html>