How to realize the Shopping cart settlement function by JavaScript
This article mainly explains "how to realize the shopping cart settlement function by JavaScript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize the shopping cart settlement function by JavaScript".
JavaScript to achieve shopping cart settlement methods: 1, after the page loading function;2, get elements; 3, set up the add and subtract button; 4, save another subscript; 5, set the plus and minus sign click event; 6, create a check box state change event.
This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.
How does JavaScript realize shopping cart settlement?
HTML Code:
-
0 pieces
+
10 yuan
Subtotal:
-
0 pieces
+
20 yuan
Subtotal:
-
0 pieces
+
30 yuan
Subtotal:
-
0 pieces
+
40 yuan
Subtotal:
-
0 pieces
+
50 yuan
Subtotal:
Select all
Total goods: 0
Total price of goods: 0
CSS code: html,body,ul,p {margin:0;padding:0;} ul,li {list-style:none;} ul {width:450px;} li {display:flex;justify-content:space-around;}. Sum {width:450px;display:flex;justify-content:space-around;} # container {width:450px;margin:100px auto;}
JS Code:
/ / 1. Execute _ window.onload = function () {/ / 2 after page loading. Get element var liCheck = document.getElementsByName ("liCheck"); / / check box var decrease = document.getElementsByClassName ("decrease"); / / minus sign var piece = document.getElementsByClassName ("piece"); / / number of pieces var increase = document.getElementsByClassName ("increase"); / / plus sign var price = document.getElementsByClassName ("price"); / / Unit var smallPrice = document.getElementsByClassName ("smallPrice") / / subtotal var checkAll = document.getElementById ("checkAll"); / / check box var totalCount = document.getElementById ("totalCount"); / / Total var totalPrice = document.getElementById ("totalPrice"); / / Total price / / 3. Add and subtract button for (var I = 0; I < decrease.length; iTunes +) {/ / 4. Save the subscript decrease [I] .index = I; increment [I] .index = I; liCheck [I] .index = I; / / 5. The click event of the minus sign [I] .onclick = function () {/ / 5-1. Determine whether the number of pieces is greater than 0 if (piece [this.index] [xss_clean])
