Error in creating Increment Decrement Counter in HTML Using JavaSCript-CodePudding

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 >
            <img  src="shopping-cart.png" alt="loading" height="300px" width="300px" >
        </br>
        <div >
            <script src="app.js"></script>
            <button  onclick="plus();"> Add <i ></i> 
            </button>
            <button  onclick="minus();"> Remove <i ></i> 
            </button>
            </div> </div>
    </body>
</html>

CodePudding user response：

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 >
            <img  src="shopping-cart.png" alt="loading" height="300px" width="300px" >
            <span id="demo"></span>
        </br>
        <div >
            <script src="app.js"></script>
            <button  onclick="plus();"> Add <i ></i> 
            </button>
            <button  onclick="minus();"> Remove <i ></i> 
            </button>
            </div> </div>
    </body>
</html>

CodePudding user response：

here i've adding a div with id=demo

var i=0;
const plus = function(){
    i  = 1;
    document.getElementById("demo").innerHTML = i;
}
const minus = function(){
    i -= 1;
    document.getElementById("demo").innerHTML = 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 >
            <img  src="shopping-cart.png" alt="loading" height="300px" width="300px" >
        </br>
        <div >
            <script src="app.js"></script>
            <button  onclick="plus();"> Add <i ></i> 
            </button>
            <button  onclick="minus();"> Remove <i ></i> 
            </button>
            <div id="demo"> </div>
         </div>
    </body>
</html>