使用 JavaSCript 在 HTML 中创建增量减量计数器时出错

Question

我一直在尝试编写代码，使用 javascript 在 html 中创建一个简单的递增和递减计数器，但我无法弄清楚出了什么问题！我在这里附上片段，如果可以的话请帮助我！

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>

Answer 1

您需要添加 ID 为“demo”的元素

并用 -= 运算符更改减号函数。

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>

Answer 2

这里我添加了一个 div 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>

使用 JavaSCript 在 HTML 中创建增量减量计数器时出错

Error in creating Increment Decrement Counter in HTML Using JavaSCript

javascript

html

css

counter