JS implements simple addition and subtraction of shopping cart effects

This article example shares the specific code of JS to achieve simple addition and subtraction of shopping carts for your reference. The specific content is as follows

1. Write the input box as the effect of addition and subtraction.

2. The plus and minus buttons are implemented using button buttons

3. Use js to control the value of i as the value in the input box.

The effect achieved:

The complete code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   body{
    margin: 0;
    padding: 0;
   }
   .box{
    border: red solid 1px;
    height: 40px;
    width: 200px;
    margin: 200px auto;
    text-align: center;
    padding-top: 20px;
   }
   .box input{
    width: 40px;
    text-align: center;
   }
   #money{
    border: none;
    text-align: left;
    margin-left: 2px;
   }
   ul{
    list-style: none;
   }
   ul li{
    display: block;
    float: left;
    vertical-align: middle;
   }
  </style>
  <script>
   window.onload = function(){
    var plus = document.getElementById("plus");
    var i = document.getElementById("text").value;
    var subtract = document.getElementById("subtract");
    var money = document.getElementById("money").value;
    plus.onclick = function(){
     i++;
     document.getElementById("text").value = i;
     document.getElementById("money").value = i*money;
    }
    subtract.onclick = function(){
     if (i>0) {
      i--;
      document.getElementById("text").value = i;
      document.getElementById("money").value = i*money;
     } else{
      i=0;
      document.getElementById("text").value = i;
      document.getElementById("money").value = i*money;
     }
    }    
   }  
  </script>
 </head>
 <body>
  <ul class="box">
   <li><button id="plus">+</button></li>
   <li><input type="text" id="text" value="1"/></li>
   <li><button id="subtract">-</button></li>
   <li>&nbsp;&nbsp;&nbsp;¥<input type="text" id="money" value="88"/></li>
  </ul>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js implements shopping cart addition and subtraction and price calculation
js realizes shopping cart addition and subtraction and price calculation functions
js to add and subtract the number of items in the shopping cart
How to add product components to vue.js shopping cart
Implementing the Add to Cart Effect Based on JavaScript with Source Code Download

<<: MySql Installer 8.0.18 Visual Installation Tutorial with Pictures and Text

>>: Various problems and solutions in the process of deploying Tomcat to release projects on Linux