点击按钮后如何从元素收集数据？

问题描述 投票：0回答：1

我创建了一个简单的在线商店。我尝试创建一个脚本，在单击“添加到购物篮”按钮后从元素中检索数据。接下来，如果用户选择并将产品添加到购物篮，则单击“转到购物篮”。程序应显示购物篮部分，其中包含产品信息：名称、价格和尺寸。如果有不止一种选择的产品计划，则应将所有价格相加。

<!DOCTYPE html>
<html lang="pl" "eng">
    <!---->
    <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Goodclothes</title>
    <link rel="icon" type="image/x-icon" href="bluza_ikona.png">
    <script  defer src="script.js"></script>
    </head>
    <style>
    </style>
        <body>
        
        <form style="border: 1px solid; background-color: #F5F2E9;" class="container">
        <h1 style="text-align: center;"><i>Goodclothes<i></h1>
        <fieldset>
        <legend class="maint">OUR PRODUCTS</legend>
            <!---->
            <div name="Green hoodie">
            <a 
            onMouseOver='change1.src="green2.jpg"'
            onMouseOut='change1.src="green1.jpg"'>
            <img src="green1.jpg" id="change1" alt="Green hoodie" border="0" width= "212" height= "318">
            </a>
            
            <h4>Green hoodie</h4>
            <p id="price1" value="119,99">Price: 119,99 PLN</p><br>
            <p>Choose size:</p>
            <select id="size1">
            <option value="xs">XS</option>
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
            <option value="xxl">XXL</option>
            </select>
            <br></br>
            <button type="button" class="addToCart" onclick="addToCart('Green hoodie', 'price1', 'size1')">ADD TO BASKET </button>
            </div>
        </fieldset>
        
        
        <fieldset>
            <div>
            <a 
            onMouseOver='change2.src="ablack2.jpg"'
            onMouseOut='change2.src="ablack1.jpg"'>
            
            <img src="ablack1.jpg" id="change2" alt="Black hoodie Asian Style" border="0" width="212" height="318">
            </a>
            
            <h4>Black hoodie asian style</h4>
            <p id="price2" value="139,99">Price: 139,99 PLN</p>
            <p>Choose size:</p>
            <select id="size2">
            <option value="xs">XS</option>
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
            <option value="xxl">XXL</option>
            </select>
            <br></br>
            <button type="button" class="addToCart" onclick="addToCart('Black hoodie asian style', 'cena2', 'size2')">ADD TO BASKET</button>
            </div>
        </fieldset> <br>
        
        </form>
        
        <div align="center">
            <button  type="button" class="addToCart" id="bucket" onclick="openBucket()">Go to basket</button>
        </div>
        
        <div id="cart" style="display: none;">
        <h2>BASKET</h2>
        <div id="cartItems"></div>
        <p id="totalPrice"></p>
        </div>
        
        </body>
</html>

和脚本：

var cart = [];


function addToCart(name, priceElementId, sizeElementId) {
    var price = document.getElementById(priceElementId)[0].value;
    var size = document.getElementById(sizeElementId).value;
    
    console.log("Adding to basket:", name, price, size);
    
    var product = {
        name: name,
        size: size,
        price: parseFloat(price),
    };
    
    cart.push(product);
    
    console.log("Basket after adding:", cart);
    
    updateCartDisplay();
}

function updateCartDisplay() {
    var cartItemsDiv = document.getElementById("cartItems");
    var totalPriceParagraph = document.getElementById("totalPrice");
    
    cartItemsDiv.innerHTML = '';
    
    var totalPrice = cart.reduce(function (sum, product) {
        return sum + product.price;
    }, 0);

    cart.forEach(function (product) {
        var productInfo = document.createElement("p");
        productInfo.textContent = product.name + " - Size: " + product.size + " - Size: " + product.price.toFixed(2) + " PLN";
        cartItemsDiv.appendChild(productInfo);
    });
    totalPriceParagraph.textContent = "Total price: " + totalPrice.toFixed(2) + " PLN";
}

function openBucket() {
    var cartDiv = document.getElementById("cart");
    cartDiv.style.display = "block";
    
    updateCartDisplay();
}

最后将产品添加到购物篮并打开购物篮程序显示购物车（没有任何意义）和总价：0,00。我尝试用不同的方式解决它，甚至使用 ChatGPT，但仍然有问题并且不知道在哪里。

javascript html web button onclick
1个回答
0
投票

您无法为 p 元素赋值。我在其innerHTML中添加了一个div，其中放置了我稍后将通过您的代码检索的价格

var cart = [];


function addToCart(name, priceElementId, sizeElementId) {
    var price = document.getElementById(priceElementId).innerHTML;
    var size = document.getElementById(sizeElementId).value;
    console.log(price)
    console.log("Adding to basket:", name, price, size);
    
    var product = {
        name: name,
        size: size,
        price: parseFloat(price),
    };
    
    cart.push(product);
    
    console.log("Basket after adding:", cart);
    
    updateCartDisplay();
}

function updateCartDisplay() {
    var cartItemsDiv = document.getElementById("cartItems");
    var totalPriceParagraph = document.getElementById("totalPrice");
    
    cartItemsDiv.innerHTML = '';
    
    var totalPrice = cart.reduce(function (sum, product) {
        return sum + product.price;
    }, 0);

    cart.forEach(function (product) {
        var productInfo = document.createElement("p");
        productInfo.textContent = product.name + " - Size: " + product.size + " - Size: " + product.price.toFixed(2) + " PLN";
        cartItemsDiv.appendChild(productInfo);
    });
    totalPriceParagraph.textContent = "Total price: " + totalPrice.toFixed(2) + " PLN";
}

function openBucket() {
    var cartDiv = document.getElementById("cart");
    cartDiv.style.display = "block";
    
    updateCartDisplay();
}
  <form style="border: 1px solid; background-color: #F5F2E9;" class="container">
    <h1 style="text-align: center;"><i>Goodclothes<i></h1>
    <fieldset>
    <legend class="maint">OUR PRODUCTS</legend>
        <!---->
        <div name="Green hoodie">
        <a 
        onMouseOver='change1.src="green2.jpg"'
        onMouseOut='change1.src="green1.jpg"'>
        <img src="green1.jpg" id="change1" alt="Green hoodie" border="0" width= "212" height= "318">
        </a>
        
        <h4>Green hoodie</h4>
        <div style="display:flex; flex-direction:row; line-height:1.5rem">Price <p id="price1">119,99</p>PLN</div>
        <p>Choose size:</p>
        <select id="size1">
        <option value="xs">XS</option>
        <option value="s">S</option>
        <option value="m">M</option>
        <option value="l">L</option>
        <option value="xl">XL</option>
        <option value="xxl">XXL</option>
        </select>
        <br></br>
        <button type="button" class="addToCart" onclick="addToCart('Green hoodie', 'price1', 'size1')">ADD TO BASKET </button>
        </div>
    </fieldset>
    
    
    <fieldset>
        <div>
        <a 
        onMouseOver='change2.src="ablack2.jpg"'
        onMouseOut='change2.src="ablack1.jpg"'>
        
        <img src="ablack1.jpg" id="change2" alt="Black hoodie Asian Style" border="0" width="212" height="318">
        </a>
        
        <h4>Black hoodie asian style</h4>
        <div style="display:flex; flex-direction:row; line-height:1.5rem">Price <p id="price2">139,99</p>PLN</div>
        <p>Choose size:</p>
        <select id="size2">
        <option value="xs">XS</option>
        <option value="s">S</option>
        <option value="m">M</option>
        <option value="l">L</option>
        <option value="xl">XL</option>
        <option value="xxl">XXL</option>
        </select>
        <br></br>
        <button type="button" class="addToCart" onclick="addToCart('Black hoodie asian style', 'price2', 'size2')">ADD TO BASKET</button>
        </div>
    </fieldset> <br>
    
    </form>
    
    <div align="center">
        <button  type="button" class="addToCart" id="bucket" onclick="openBucket()">Go to basket</button>
    </div>
    
    <div id="cart" style="display: none;">
    <h2>BASKET</h2>
    <div id="cartItems"></div>
    <p id="totalPrice"></p>
    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.