鵾438 2023-09-24 15:40 采纳率: 0%
浏览 15
已结题

通过文本框输入商品信息点击按钮将商品信息列举出来点击加入购物车商品信息添加到表单中

img


通过文本框输入商品信息点击按钮将商品信息列举出来点击加入购物车商品信息添加到表单中

  • 写回答

13条回答 默认 最新

  • 专家-赤兔[在线] 2023-09-24 15:45
    关注
    获得0.45元问题酬金

    引用 皆我百晓生 小程序回复内容作答:
    你可以使用以下代码实现上述功能:

    HTML代码:

    <input type="text" id="productInput" placeholder="输入商品信息">
    <button onclick="listProduct()">添加商品</button>
    
    <div id="productList"></div>
    
    <form id="cartForm">
      <button onclick="addToCart()">加入购物车</button>
    </form>
    

    JavaScript代码:

    function listProduct() {
      var productInput = document.getElementById("productInput");
      var productList = document.getElementById("productList");
      var productInfo = productInput.value;
      var productItem = document.createElement("p");
      productItem.textContent = productInfo;
      productList.appendChild(productItem);
      productInput.value = "";
    }
    
    function addToCart() {
      var productList = document.getElementById("productList");
      var cartForm = document.getElementById("cartForm");
      var productItems = productList.getElementsByTagName("p");
      
      for (var i = 0; i < productItems.length; i++) {
        var productInfo = productItems[i].textContent;
        var productInput = document.createElement("input");
        productInput.type = "hidden";
        productInput.name = "cartItem";
        productInput.value = productInfo;
        cartForm.appendChild(productInput);
      }
    }
    

    上述代码中,首先通过listProduct函数将输入框中的商品信息添加到列表中。然后,通过addToCart函数将列表中的商品信息添加到表单中作为隐藏的表单项(input元素的type属性为hidden),这样在提交表单时就可以将购物车中选中的商品信息发送给服务器进行处理。

    评论
  • CSDN专家-showbo 2023-09-24 17:32
    关注
    获得0.75元问题酬金
    评论
  • Hi 小朋友 2023-09-24 15:52
    关注
    获得0.30元问题酬金

    这个有没有后端代码

    评论
  • 数据大魔王 2023-09-24 16:40
    关注
    获得0.60元问题酬金
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>购物车</title>
        <style>
            /* 添加样式以美化页面 */
            body {
                font-family: Arial, sans-serif;
            }
            #productInput {
                width: 300px;
            }
            #productList {
                list-style: none;
                padding: 0;
            }
            #cartForm {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <h1>购物车</h1>
        <div>
            <input type="text" id="productInput" placeholder="输入商品信息">
            <button onclick="addProduct()">添加到购物车</button>
        </div>
        <h2>商品列表</h2>
        <ul id="productList"></ul>
        <h2>购物车</h2>
        <form id="cartForm">
            <!-- 这里将添加的商品信息显示为表单中的文本框 -->
        </form>
    
        <script>
            // 商品信息数组,用于存储添加的商品信息
            const products = [];
    
            // 获取文本框和商品列表元素
            const productInput = document.getElementById("productInput");
            const productList = document.getElementById("productList");
    
            // 获取购物车表单元素
            const cartForm = document.getElementById("cartForm");
    
            // 添加商品到列表和购物车
            function addProduct() {
                const productInfo = productInput.value;
                if (productInfo.trim() !== "") {
                    // 将商品信息添加到数组
                    products.push(productInfo);
    
                    // 更新商品列表
                    const listItem = document.createElement("li");
                    listItem.textContent = productInfo;
                    productList.appendChild(listItem);
    
                    // 更新购物车表单
                    const inputElement = document.createElement("input");
                    inputElement.type = "text";
                    inputElement.name = "cartItem";
                    inputElement.value = productInfo;
                    cartForm.appendChild(inputElement);
    
                    // 清空文本框
                    productInput.value = "";
                }
            }
        </script>
    </body>
    </html>
    
    
    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-09-24 18:50
    关注
    获得0.75元问题酬金

    【以下回答由 GPT 生成】

    问题优化建议:

    问题标题: 实现商品信息的录入和加入购物车功能

    问题内容:

    我想实现一个功能:用户可以通过文本框输入商品信息,并点击按钮后将商品信息列举出来。同时,我还希望能够点击一个按钮将商品信息添加到购物车表单中。我使用JavaScript来实现这个功能。

    请问如何使用JavaScript来实现商品信息录入和加入购物车功能?



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论
  • coder_small_bell 2023-09-24 21:22
    关注
    获得0.30元问题酬金

    输入触发state然后请求服务器。

    评论
  • 杨得江-君临天下wyj 2023-09-25 06:48
    关注
    获得0.45元问题酬金
    
    <input type="text" id="productInput" placeholder="输入商品信息">
    <button onclick="listProduct()">添加商品</button>
    <div id="productList"></div>
    <form id="cartForm">
      <button onclick="addToCart()">加入购物车</button>
    </form>
    
    
    评论
  • 心梓知识 2023-09-26 01:47
    关注
    获得0.45元问题酬金

    结合GPT给出回答如下请题主参考
    您好,以下是一个示例代码实现您所需的功能:

    HTML部分:

    <!DOCTYPE html>
    <html>
    <head>
        <title>购物车</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <label>商品名称:</label>
            <input type="text" id="name">
        </div>
        <div>
            <label>商品价格:</label>
            <input type="text" id="price">
        </div>
        <div>
            <label>商品数量:</label>
            <input type="text" id="quantity">
        </div>
        <button onclick="addItem()">添加商品</button>
        <hr>
        <form>
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                </tr>
                <tbody id="cartItems"></tbody>
                <tr>
                    <td colspan="2">总价:</td>
                    <td><span id="totalPrice">0</span></td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    

    JavaScript部分:

    // 商品列表
    var products = [];
    
    // 添加商品
    function addItem() {
        var name = document.getElementById("name").value;
        var price = parseFloat(document.getElementById("price").value);
        var quantity = parseInt(document.getElementById("quantity").value);
    
        // 检查商品名称、价格和数量是否为空
        if (name === "" || isNaN(price) || isNaN(quantity)) {
            alert("请填写正确的商品信息!");
            return;
        }
    
        // 添加商品到列表
        var product = { name: name, price: price, quantity: quantity };
        products.push(product);
    
        // 清空输入框
        document.getElementById("name").value = "";
        document.getElementById("price").value = "";
        document.getElementById("quantity").value = "";
    
        // 列出商品列表
        showCartItems();
    }
    
    // 列出购物车的商品列表和总价
    function showCartItems() {
        var cartItems = "";
        var totalPrice = 0;
    
        // 循环商品列表
        for (var i = 0; i < products.length; i++) {
            var product = products[i];
            var itemPrice = product.price * product.quantity;
            totalPrice += itemPrice;
    
            // 添加商品到购物车列表
            cartItems += "<tr>";
            cartItems += "<td>" + product.name + "</td>";
            cartItems += "<td>" + product.price.toFixed(2) + "</td>";
            cartItems += "<td>" + product.quantity + "</td>";
            cartItems += "<td>" + itemPrice.toFixed(2) + "</td>";
            cartItems += "<td><button onclick='removeItem(" + i + ")'>删除</button></td>";
            cartItems += "</tr>";
        }
    
        // 显示购物车列表和总价
        if (cartItems !== "") {
            document.getElementById("cartItems").innerHTML = cartItems;
            document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2);
        } else {
            document.getElementById("cartItems").innerHTML = "<tr><td colspan='5'>购物车为空</td></tr>";
            document.getElementById("totalPrice").innerHTML = "0";
        }
    }
    
    // 从购物车中删除商品
    function removeItem(index) {
        products.splice(index, 1);
        showCartItems();
    }
    

    在这个示例中,我们创建了一个JavaScript数组来存储商品列表。当添加新商品时,我们从文本框中获取商品名称、价格和数量,并将其作为对象添加到该数组中。然后,我们将购物车列表和总价显示在HTML表格中并更新HTML表单。如果删除了某个商品,则从数组中删除该商品并更新HTML表格和表单。

    评论
  • yy64ll826 2023-09-26 16:57
    关注
    获得0.30元问题酬金
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="css/help-center.css" />
            <title>我的购物车</title>
    
            <style>
                * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            list-style: none;
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }
        body {
            background: #f5f5f5;
            height: 100%;
        }
        .header{
        font-size: 12px;
        border-bottom: 2px solid #ff6700;
        background: #fff;
        color: #b0b0b0;
        position: relative;
        z-index: 20;
        height: 100px;
    }
        .header .container {
        position: relative;
        width: 1226px;
        margin-right: auto;
        margin-left: auto;
    }
     .header .container .header-logo {
        width: 93px;
        margin-top: 26px;
    }
    
     .logo {
        width: 48px;
        height: 48px;
        position: relative;
        display: block;
        width: 55px;
        height: 55px;
        overflow: hidden;
        background-color: #ff6700;
        }
        .header-title {
        float: left;
        margin-top: 26px;
        font-size: 12px;
        }
        .topbar-info {
        margin-top: 30px;
        line-height: 40px;
    }
        .link {
        padding: 0 5px;
        color: #757575;
        text-decoration: none;
        }
        .hid {
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .box_head{
        position: relative;
        margin: 0;
        height: 50px;
        font-size: 30px;
        font-weight: 400;
        color: #757575;
        border-top: 1px solid #e0e0e0;
      }
      .box_head span{
      position: absolute;
        top: -20px;
        left: 372px;
        height: 40px;
        width: 482px;
        line-height: 40px;
        text-align: center;
        display: block;
        background-color: #f5f5f5;
        font-size: 30px;
        }
        #box {
            width:1240px;
            margin: 20px auto;
        }
        #box ul {
            margin-right: -14px;
            overflow: hidden;
        }
        #box li {
            width: 234px;
            float: left;
            margin-right: 14px;
            padding: 24px 0 20px;
            background: #FFF;
            text-align: center;
            position: relative;
            cursor: pointer;
            margin-bottom:14px;
        }
        .pro_img {
            width: 150px;
            height: 150px;
            margin: 0 auto 18px;
        }
        .pro_name {
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: 400;
        }
        .pro_name a {
            color: #333;
        }
        .pro_price {
            color: #ff6700;
            margin: 10px;
        }
        .pro_rank {
            color: #757575;
            margin: 10px;
        }
        #box li:hover .add_btn {
            display: block;
        }
        #box li:hover .pro_rank {
            opacity: 0;
        }
        #box li .add_btn:hover {
            background-color: #f60;
            color: white;
        }
        
    
        
        .add_btn {
            height: 22px;
            position: absolute;
            width: 122px;
            bottom: 28px;
            left: 50%;
            margin-left: -61px;
            line-height: 22px;
            display: none;
            color: #F60;
            font-size: 12px;
            border: 1px solid  #f60;
        }
        .car {
            width: 1240px;
            margin: 20px auto;
            background: #FFF;
        }
        .car .check{
            width: 50px;
        
        }
        .car .check i{
            color: #fff;
            display: inline-block;
            
            width: 18px;
            height: 18px;
            line-height: 18px;
            border: 1px solid #e0e0e0;
            margin-left: 24px;
            background-color: #fff;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            position: relative;
            top: -1px;
            cursor: pointer;
            font-family: "iconfont";
        }
        .i_acity {
    
            border-color: #ff6700 !important;
            background-color: #ff6700 !important;
        }
        .car .img {
            width: 190px;
        }
        .car .img img {
            display: block;
            width: 80px;
            height: 80px;
            margin: 3px auto;
        }
        .car .name {
            width: 300px;
        }
        .car .name span {
            line-height: 1;
            margin-top: 8px;
            margin-bottom: 8px;
            font-size: 18px;
            font-weight: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .car .price {
            width: 144px;
            text-align: right;
            padding-right: 84px;
        }
        .car .price span {
            color: #ff6700;
            font-size: 16px;
        }
        .car .number{
            width: 150px;
        }
        .car .subtotal{
            width: 130px;
            
        }
        .car .ctrl {
            width: 105px;
            padding-right:25px;
            text-align: center;
        }
        .car .ctrl a {
            font-size: 20px;
            cursor: pointer;
            display: block;
            width: 26px;
            height: 26px;
            margin: 30px auto;
            line-height: 26px;
        }
        .car .ctrl a:hover {
            color: #FFF;
            background: #ff6700;
            border-radius: 50%;
        }
        .head_row {
            height: 70px;
            line-height: 70px;
        }
        .head_row, .row {
            border-bottom: solid 1px #e0e0e0;
        }
        .row {
            height: 86px;
            line-height:86px;
            padding: 15px 0;
            margin: 0px;
        }
        #sum_area{
            width:1240px;
            height: 60px;
            background: white;
            margin: 20px auto;
        }
        #sum_area #pay{
            width:250px;
            height:60px;
            text-align: center;
            float: right;
            line-height: 60px;
            font-size: 19px;
            background: #FF4B00;
            color: white;
        }
        #sum_area #pay_amout{
            width:250px;
            height:60px;
            text-align: center;
            float: right;
            line-height: 60px;
            font-size: 16px;
            color:#FF4B00 ;
        }
        #sum_area #pay_amout #price_num{
            width:100px;
            height: 60px;
            font-size: 25px;
            color:#FF4B00 ;
        /*    float: left;*/
        }
        
        .item_count_i{
            height: 85px;
            width:10%;
            /*border: 1px solid black;*/
            float: left;
            margin-right: 25px;
        }
        .num_count{
            width:150px;
            height:40px;
            border: 1.2px solid #E0E0E0;
            float:right;
            margin-top: 21px;
        
        }
        .count_i{
            width:30%;
            height:40px;
            line-height: 40px;
            float: left;
            text-align: center;
            font-size:21px;
            color: #747474;
        }
        .count_i:hover{
            width:30%;
            height:40px;
            line-height: 40px;
            float: left;
            text-align: center;
            font-size:21px;
            color: #747474;
            background: #E0E0E0;
            cursor: pointer;
        }
        .c_num{
            width:40%;
            height:40px;
            line-height: 40px;
            float: left;
            text-align: center;
            font-size:16px;
            color: #747474;
        }
        .count_d{
            width:30%;
            height:40px;
            line-height: 40px;
            float: left;
            text-align: center;
            font-size:25px;
            color: #747474;
        }
        .count_d:hover{
            width:30%;
            height:40px;
            line-height: 40px;
            float: left;
            text-align: center;
            font-size:25px;
            color: #747474;
            background: #E0E0E0;
            cursor: pointer;
        }
        .i_acity2 {
            border-color: #ff6700 !important;
            background-color: #ff6700 !important;
        }
    
    </style>
        </head>
        <body>
            <script>
                window.onload = function() {
                    var aData = [{
                            "imgUrl": "img/03-car-01.png",
                            "proName": " 小米手环4 NFC版 ",
                            "proPrice": "229",
                            "proComm": "1"
                        },
                        {
                            "imgUrl": "img/03-car-02.png",
                            "proName": " Redmi AirDots真无线蓝牙耳机 ",
                            "proPrice": "99.9",
                            "proComm": "9.7"
                        },
                        {
                            "imgUrl": "img/03-car-03.png",
                            "proName": " 米家蓝牙温湿度计 ",
                            "proPrice": "65",
                            "proComm": "1.3"
                        },
                        {
                            "imgUrl": "img/03-car-04.png",
                            "proName": " 小米小爱智能闹钟 ",
                            "proPrice": "149",
                            "proComm": "1.1"
                        },
                        {
                            "imgUrl": "img/03-car-05.png",
                            "proName": "米家电子温湿度计Pro  ",
                            "proPrice": "750",
                            "proComm": "0.3"
                        },
                        {
                            "imgUrl": "img/03-car-06.png",
                            "proName": " 小米手环3 NFC版 Pro  ",
                            "proPrice": "199",
                            "proComm": "3.3"
                        },
                        {
                            "imgUrl": "img/03-car-07.png",
                            "proName": " 小米手环3 / 4 通用腕带",
                            "proPrice": "19.9",
                            "proComm": "1.2"
                        },
                        {
                            "imgUrl": "img/03-car-08.png",
                            "proName": "  米家温湿度传感器 ",
                            "proPrice": "45",
                            "proComm": "0.6"
                        },
                        {
                            "imgUrl": "img/03-car-09.png",
                            "proName": "  米家电子温湿度计Pro 3个装  ",
                            "proPrice": "207",
                            "proComm": "0.3"
                        },
                        {
                            "imgUrl": "img/03-car-10.png",
                            "proName": " 小米手环3 ",
                            "proPrice": "199",
                            "proComm": "7.2"
                        }
                    ];
                    var oBox = document.getElementById("box");
                    var oCar = document.getElementById("car");
                    var oUl = document.getElementsByTagName("ul")[0];
    
                    for (var i = 0; i < aData.length; i++) {
                        var oLi = document.createElement("li");
                        var data = aData[i];
    
                        oLi.innerHTML += '<div class="pro_img"><img src="' + data["imgUrl"] + '" width="150" height="150"></div>';
                        oLi.innerHTML += '<h3 class="pro_name"><a href="#">' + data["proName"] + '</a></h3>';
                        oLi.innerHTML += '<p class="pro_price">' + data["proPrice"] + '元</p>';
                        oLi.innerHTML += '<p class="pro_rank">' + data["proComm"] + '万人好评</p>';
                        oLi.innerHTML += '<div class="add_btn">加入购物车</div>';
                        oUl.appendChild(oLi);
    
                    }
                    var aBtn = getClass(oBox, "add_btn");//获取box下的所有添加购物车按钮
                    var number = 0;//初始化商品数量
                    for (var i = 0; i < aBtn.length; i++) {
                        number++;
                        aBtn[i].index = i;
                        aBtn[i].onclick = function() {
                            var oDiv = document.createElement("div");
                            var data = aData[this.index];
                            oDiv.className = "row hid";
                            oDiv.innerHTML += '<div class="check left"> <i class="i_check" id="i_check" onclick="i_check()" >√</i></div>';
                            oDiv.innerHTML += '<div class="img left"><img src="' + data["imgUrl"] + '" width="80" height="80"></div>';
                            oDiv.innerHTML += '<div class="name left"><span>' + data["proName"] + '</span></div>';
                            oDiv.innerHTML += '<div class="price left"><span>' + data["proPrice"] + '元</span></div>';
                            oDiv.innerHTML +=' <div class="item_count_i"><div class="num_count"><div class="count_d">-</div><div class="c_num">1</div><div class="count_i">+</div></div> </div>'
                            oDiv.innerHTML += '<div class="subtotal left"><span>' + data["proPrice"] + '元</span></div>'
                            oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
                            oCar.appendChild(oDiv);
                            var flag = true;
                            var check = oDiv.firstChild.getElementsByTagName("i")[0];
                            check.onclick = function() {
                                // console.log(check.className);
                                if (check.className == "i_check i_acity") {
                                    check.classList.remove("i_acity");
    
                                } else {
                                    check.classList.add("i_acity");
                                }
                                getAmount();
                            }
                            var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
                            delBtn.onclick = function() {
                                var result = confirm("确定删除吗?");
                                if (result) {
                                    oCar.removeChild(oDiv);
                                    number--;
                                    getAmount();
                                }
                            }
                            var i_btn = document.getElementsByClassName("count_i");
                            for (var k = 0; k < i_btn.length; k++) {
                                i_btn[k].onclick = function() {
                                    bt = this;
                                    //获取小计节点
                                    at = this.parentElement.parentElement.nextElementSibling;
                                    //获取单价节点
                                    pt = this.parentElement.parentElement.previousElementSibling;
                                    //获取数量值
                                    node = bt.parentNode.childNodes[1];
                                    console.log(node);
                                    num = node.innerText;
                                    num = parseInt(num);
                                    num++;
                                    node.innerText = num;
                                    //获取单价
                                    price = pt.innerText;
                                    price = price.substring(0, price.length - 1);
                                    //计算小计值
                                    at.innerText = price * num + "元";
                                    //计算总计值
                                    getAmount();
                                }
                            }
                            //获取所有的数量减号按钮
                            var d_btn = document.getElementsByClassName("count_d");
                            for (k = 0; k < i_btn.length; k++) {
                                d_btn[k].onclick = function() {
                                    bt = this;
                                    //获取小计节点
                                    at = this.parentElement.parentElement.nextElementSibling;
                                    //获取单价节点
                                    pt = this.parentElement.parentElement.previousElementSibling;
                                    //获取c_num节点
                                    node = bt.parentNode.childNodes[1];
                                    num = node.innerText;
                                    num = parseInt(num);
                                    if (num > 1) {
                                        num--;
                                    }
                                    node.innerText = num;
                                    //获取单价
                                    price = pt.innerText;
                                    price = price.substring(0, price.length - 1);
                                    //计算小计值        
                                    at.innerText = price * num + "元";
                                    //计算总计值
                                    getAmount();
                                }
                            }
    
                            delBtn.onclick = function() {
                                var result = confirm("确定删除吗?");
                                if (result) {
                                    oCar.removeChild(oDiv);
                                    number--;
                                    getAmount();
                                }
                            }
    
                        }
                    }
    
                }
    
                function getClass(oBox, tagname) {
                    var aTag = oBox.getElementsByTagName("*");
                    var aBox = [];
                    for (var i = 0; i < aTag.length; i++) {
                        if (aTag[i].className == tagname) {
                            aBox.push(aTag[i]);
                        }
                    }
                    return aBox;
                }
    
    
                var index = false;
                function checkAll() {
                    var choose = document.getElementById("car").getElementsByTagName("i");
                    // console.log(choose);
                    if (choose.length != 1) {
                        for (i = 1; i < choose.length; i++) {
                            if (!index) {
                                choose[0].classList.add("i_acity2")
                                choose[i].classList.add("i_acity");
                            } else {
                                choose[i].classList.remove("i_acity");
                                choose[0].classList.remove("i_acity2")
                            }
                        }
                        index = !index;
                    }
                    getAmount();
                }
    
    
    
                //进行价格合计
                function getAmount() {
                    // console.log(ys);
                    ns = document.getElementsByClassName("i_acity");
                    console.log(ns);
                    sum = 0;
                    //选中框
                    document.getElementById("price_num").innerText = sum;
                    for (y = 0; y < ns.length; y++) {
                        //小计
                        amount_info = ns[y].parentElement.parentElement.lastElementChild.previousElementSibling;
                        num = parseInt(amount_info.innerText);
                        sum += num;
                        document.getElementById("price_num").innerText = sum;
                    }
                }
            </script>
            </head>
            <body>
                <div class="header">
                    <div class="container">
                        <div class="header-logo">
                            <a class="logo ir" href="" title="小米官网">小米官网</a>
                        </div>
                        <div class="header-title" id="J_miniHeaderTitle">
                            <h2 style="font-size: 30px;">我的购物车</h2>
                        </div>
                        <div class="topbar-info" id="J_userInfo">
                            <a class="link" href="http://www.weichufeng.cn/login.jsp">登录</a><span class="sep">|</span><a class="link" href="http://www.weichufeng.cn/regist.jsp">注册</a></div>
                    </div>
                </div>
    
    
                <div id="car" class="car">
    
                    <div class="head_row hid">
                        <div class="check left"> <i onclick="checkAll()"></i></div>
                        <div class="img left">&nbsp;&nbsp;全选</div>
                        <div class="name left">商品名称</div>
                        <div class="price left">单价</div>
                        <div class="number left">数量</div>
                        <div class="subtotal left">小计</div>
                        <div class="ctrl left">操作</div>
                    </div>
    
    
                </div>
                <div id="sum_area">
                    <div id="pay">去结算</div>
                    <div id="pay_amout">合计:<span id="price_num">0</span></div>
                </div>
    
    
    
                <div id="box">
                    <h2 class="box_head"><span>买购物车中商品的人还买了</span></h2>
                    <ul>
                    </ul>
                </div>
    
            
            </body>
    </html>
    
    
    
    评论
  • Leodong. 2023-09-27 11:33
    关注
    获得0.45元问题酬金

    该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
    这个query的需求是创建一个JavaScript程序,该程序允许用户输入商品信息(如名称和价格),点击一个按钮将商品信息展示在页面上,并可以通过点击“加入购物车”按钮将商品信息添加到表单中。

    解析:

    1. 首先,我们需要创建HTML元素来接收用户输入的商品信息,包括名称和价格。
    2. 然后,我们需要创建一个按钮,当用户点击这个按钮时,会触发一个JavaScript函数。
    3. 这个JavaScript函数将会获取用户输入的商品信息,并将其展示在页面上。
    4. 我们还需要创建一个“加入购物车”按钮,当用户点击这个按钮时,会触发另一个JavaScript函数。
    5. 这个函数将会获取用户选择的商品信息,并将其添加到表单中。

    代码如下:

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>添加商品到购物车</h2>
    
    <form id="myForm">
      <label for="fname">商品名称:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="fprice">商品价格:</label><br>
      <input type="text" id="fprice" name="fprice"><br><br>
      <button type="button" onclick="showProduct()">展示商品</button>
      <button type="button" onclick="addToCart()">加入购物车</button>
    </form> 
    
    <p id="products"></p>
    
    <script>
    var products = [];
    
    function showProduct() {
      var fname = document.getElementById("fname").value;
      var fprice = document.getElementById("fprice").value;
      products.push({name: fname, price: fprice});
      document.getElementById("products").innerHTML = "";
      for(var i=0; i<products.length; i++){
        document.getElementById("products").innerHTML += "名称: " + products[i].name + ", 价格: " + products[i].price + "<br>";
      }
    }
    
    function addToCart(){
      var selectedProduct = products[products.length-1];
      var form = document.getElementById("myForm");
      form.appendChild(selectedProduct);
    }
    </script>
    
    </body>
    </html>
    

    这段代码首先定义了一个空的数组用来存储商品信息。然后定义了两个函数,一个是showProduct(),用于获取用户输入的商品信息并展示出来;另一个是addToCart(),用于将用户最后选择的商品信息添加到表单中。


    如果以上回答对您有所帮助,点击一下采纳该答案~谢谢

    评论
  • bug菌¹ Java领域优质创作者 2023-09-28 01:00
    关注
    获得0.75元问题酬金

    该回答引用ChatGPT,希望对题主有所帮助,如有帮助,还望采纳。


    可以使用以下代码实现:

    HTML部分:

    <div>
      <label>商品信息:</label>
      <input type="text" id="product-info">
      <button onclick="addProduct()">添加商品</button>
    </div>
    
    <div>
      <label>购物车:</label>
      <form id="cart-form">
        <ul id="cart-list"></ul>
      </form>
    </div>
    

    JavaScript部分:

    // 获取DOM元素
    const productInfoInput = document.getElementById('product-info');
    const cartList = document.getElementById('cart-list');
    
    // 维护购物车数据
    let cartData = [];
    
    // 添加商品到购物车
    function addProduct() {
      const productInfo = productInfoInput.value;
      if (!productInfo) {
        alert('请输入商品信息');
        return;
      }
      
      // 添加商品到购物车数据中
      const product = {
        id: cartData.length + 1,
        info: productInfo,
        price: '¥15',
        imgUrl: 'img'
      };
      cartData.push(product);
      
      // 刷新购物车列表
      renderCartList();
      
      // 清空商品信息输入框
      productInfoInput.value = '';
    }
    
    // 将购物车数据渲染到页面上
    function renderCartList() {
      let cartHtml = '';
      cartData.forEach(product => {
        cartHtml += `
          <li>
            <span>${product.info}</span>
            <span>${product.price}</span>
            <span><img src="${product.imgUrl}"></span>
            <button onclick="removeProduct(${product.id})">删除</button>
          </li>
        `;
      });
      cartList.innerHTML = cartHtml;
    }
    
    // 从购物车中移除指定商品
    function removeProduct(id) {
      cartData = cartData.filter(product => product.id !== id);
      renderCartList();
    }
    

    这段代码实现了通过文本框输入商品信息,点击按钮添加到购物车的功能。具体实现方式是:

    1. 在HTML中定义商品信息文本框和添加按钮,以及购物车列表。
    2. 在JavaScript中维护一个购物车数据数组,用来存储添加到购物车中的商品。
    3. 在添加按钮的点击事件中,获取商品信息文本框中的值,如果为空则弹出提示框,否则将商品信息添加到购物车数据数组中,并调用一个名为renderCartList的函数来将购物车数据渲染到页面上。
    4. renderCartList函数遍历购物车数据数组,以HTML的形式将每个商品显示在购物车列表中。
    5. 每个商品条目中都添加了一个“删除”按钮,点击后移除该商品,并调用renderCartList函数重新渲染购物车列表。
    评论
  • 夜深人静的码农 2023-09-28 16:23
    关注
    获得0.30元问题酬金

    你这要么让后端开发人员给你开发一个批量提交端口,要么让前端写个自动转换脚步

    评论
  • 关注
    获得0.45元问题酬金

    前端存储的话放到localstorage即可

    评论

报告相同问题?

问题事件

  • 系统已结题 10月2日
  • 创建了问题 9月24日

悬赏问题

  • ¥15 微信实时共享位置修改
  • ¥100 TG的session协议号转成直登号号后客户端登录几分钟后自动退出设备
  • ¥30 共模反馈回路的小信号增益
  • ¥15 arduino ssd1306函数与tone函数放歌代码不兼容问题
  • ¥70 0.96版本hbase的row_key里含有双引号,无法deleteall
  • ¥20 Ida Pro增加插件出现问题
  • ¥15 诊断性META分析合并效能的检验
  • ¥15 请问abb根据色块判断奇偶数并根据批次号放入仓储
  • ¥66 开发PC客户端一定也要开发上位机吗?
  • ¥20 Java eclipse连接数据库