js to realize simple shopping cart function

This article example shares the specific code of js to realize the simple shopping cart function for your reference. The specific content is as follows

1. Overall effect diagram

(Lights off)

(Turn on the light)

2. HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping Cart</title>
    <link type="text/css" rel="stylesheet" href="shopping cart style.css" >
    <script src="shopping cart function.js"></script>
</head>
<body id="body" >
<button id="kg" onclick="kz()">Turn on the light</button>
<div id="cons">
    <table id="table">
        <tr>
            <th>Product Name</th>
            <th>Product unit price</th>
            <th>Product quantity</th>
            <th>Total Price</th>
        </tr>
        <tr>
            <td>Xiaomi 11</td>
            <td >5000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">5</span>
                <input type="button" value="+" onclick="add2(this)"><!--Find out who clicked through this-->
            </td>
            <td class="money">25000</td>
        </tr>
        <tr>
            <td>Lenovo Y9000</td>
            <td>10000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">10000</td>
        </tr>
        <tr>
            <td>Men's Skin Care</td>
            <td>200</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">200</td>
        </tr>
        <tr>
            <td colspan="3">Total amount</td>
            <td id="total">5000</td>
        </tr>
    </table>
</div>
</body>
</html>

3. CSS code

table,th,td,tr{
    border: 5px solid slateblue;
    border-radius: 10px;
 
             }
#cons{
    border: 3px solid #FFFFFF;
    width: 600px;
    padding: 5px;
    border-radius: 10px;
    margin: 200px auto;
}
#body{
    background-color: black;
}
 
table{
    /*Define the merged display of table borders*/
    /*border-collapse: collapse;*/
    color: aquamarine;
    width: 600px;
    height: 200px;
    text-align: center;
    border-collapse: separate;border-spacing:0;/*The border-spacing property sets the distance between the borders of adjacent cells (only used in "border separate" mode). */
    table-layout:fixed;/*Fixed table layout, the horizontal layout depends only on the table width, column width, table border width, cell spacing, and has nothing to do with the content of the cell. */
 
}
#kg{
    width: 30px;
    /*border: 2px solid white;*/
    background-color: red;
    color: slateblue;
 
}

4. js code

// Addition function add(obj) {
    // Get the number of products var nums = obj.nextElementSibling.innerHTML /* Returns the value of the next sibling element node */
    if(nums>0){
        // Click to subtract nums--;
        //Replace the original value obj.nextElementSibling.innerHTML=nums;
        // Change the total price value // Get the unit price of the product var price =obj.parentElement.previousElementSibling.innerHTML;
        // Get the total price of the product var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=parseInt(nums)*parseInt(price); //parseInt converts the string into a numerical value money();
    }
 
    // console.log(nums);
 
}
// Subtraction function add2(obj){
    var nums =obj.previousElementSibling.innerHTML/*Returns the value of the previous sibling element node*/
    if(nums>=0){
        // Click to add nums++;
        //Replace the original value obj.previousElementSibling.innerHTML=nums;
        // Change the total price value // Get the unit price of the product var price =obj.parentElement.previousElementSibling.innerHTML;
        // Get the total price of the product var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=nums*price;
        money();
    }
    // console.log(nums)
}
//Get the total amount and change it function money(){
    //Get the cell of total amount var mo = document.getElementById("total");
    //Get the cell of the total price of the product var momeys=document.getElementsByClassName("money");
    //Define the value of the total amount var sum =0;
    for(var i=0;i<momeys.length;i++){
        sum=parseInt(momeys[i].innerHTML)+sum;
    }
    mo.innerHTML=sum;
    // console.log(sum)
 
}
//Control background color function kz(){
    var background = document.getElementById("body");
    var color = window.getComputedStyle(background,null).backgroundColor; //Get the background color console.log(color);
    var font = document.getElementById("table"); //font var border = document.getElementById("cons"); //border var switch1 = document.getElementById("kg"); //switch //Change background color, font color, border color if (color=="rgb(0, 0, 0)") {
        background.style.cssText="background-color: white;"; //Change CSS style font.style.cssText="color: dimgray;";
        border.style.cssText="border: 3px solid black";
        switch1.innerHTML="Turn off the light";
    }
    else if(color=="rgb(255, 255, 255)"){
        background.style.cssText="background-color: black;";
        font.style.cssText="color: aquamarine;";
        border.style.cssText="border: 3px solid #FFFFFF";
        switch1.innerHTML="Turn on the light";
    }
 
 
}

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: