How to write the code for JavaScript to realize the checkout function of shopping cart
This article mainly introduces the relevant knowledge of how to write the code for JavaScript to achieve shopping cart settlement function, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this JavaScript code to achieve shopping cart settlement function. Let's take a look at it.
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])
