Error in creating Increment Decrement Counter in HTML Using JavaSCript

Question

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>

Update minus function with i -= 1; and add a span or div in your code with id=demo like this <span id="demo"></span> — Ritik Banger
– Ritik Banger, Commented Apr 19, 2022 at 12:48

R3tep · Accepted Answer · 2022-04-19 12:40:23Z

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>

Michie · Accepted Answer · 2022-04-19 12:42:27Z

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 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 id="demo"> </div>
         </div>
    </body>
</html>

Collectives™ on Stack Overflow

Error in creating Increment Decrement Counter in HTML Using JavaSCript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related