javascript - How to create an "Add To Cart" button and update the product to a table corresponds to the header

admin管理员组

文章数量:1387418

I'm currently working on a simple project, basically an online fruit stall. I'm facing an issue right now is that my current JS function can't trigger the "Add to cart" button to update the shopping cart table (i.e. when I pressed it, nothing happened).

I really need all of y'all help on this, I tried chatGPT but it doesn't seem to be giving me the right solution. This is my current work. Do note that I'm trying this function on one of the products, hence why I only post the code of the watermelon one

HTML

 <div class="card">
       <div class="sale-badge" id="saleBadge1">Sale!</div>
       <div class="img"><img src="Images/watermelon.jpg" alt=""></div>
       <div class="title">Watermelon</div>
       <div class="price"><span class="strike">$5</span>$2.50</div>
       <div class="btn-container">
          <button class="btn" id="addToCartBtn1" onclick="addToCart('Watermelon', 2.50)">Add to cart</button>
       </div>                
</div>

shopping.js

/* ADD CELL AFTER PRESSING ADD TO CART */
function addToCart(productName, productPrice) {
    console.log(productName + ', ' + productPrice);
    // Get the table body where cart items will be added
    var cartTableBody = document.querySelector('.shopping-cart');
    console.log(cartTableBody)

    // Create a new row for the cart item
    var newRow = cartTableBody.insertRow();
    console.log(newRow)
    
    // Create cells for product name and price
    var productNameCell = newRow.insertCell(0);
    var productPriceCell = newRow.insertCell(1);
    
    // Set the content of the cells
    productNameCell.textContent = productName;
    productPriceCell.textContent = '$' + productPrice.toFixed(2);
}

Current table created with 1 sample row

 <table class="shopping-cart">
                <tbody>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th style="width: 90px;"></th>
                        <th style="width: 500px;">Product</th>
                        <th style="width: 90px;">Price</th>
                        <th style="width: 160px;">Quantity</th>
                        <th style="width: 90px;">Subtotal</th>
                    </tr>
                    <tr>
                        <td class="cross-symbol">
                            <div class="circle"  onclick="deleteRow(this)">&times;</div>
                        </td>
                        <td class="image-cell">
                            <img src="Images/watermelon.jpg">
                        </td>
                        <td>Watermelon</td>
                        <td>$2.50</td>
                        <td>
                            <div class="quantity">
                                <button class="minus">-</button><input type="text" class="number" value="1" min="1"><button class="plus">+</button>
                            </div>
                        </td>
                    </tr>
                </tbody>

Pictures for reference

As you can see from the above two images, what I want is to press the "add to cart" of watermelon, and the content of the cards will be updated in the shopping cart corresponding to the header of the table.

Would really appreciate it if someone could help me with this. You can always DM me to discuss! Thanks!

I'm currently working on a simple project, basically an online fruit stall. I'm facing an issue right now is that my current JS function can't trigger the "Add to cart" button to update the shopping cart table (i.e. when I pressed it, nothing happened).

I really need all of y'all help on this, I tried chatGPT but it doesn't seem to be giving me the right solution. This is my current work. Do note that I'm trying this function on one of the products, hence why I only post the code of the watermelon one

HTML

 <div class="card">
       <div class="sale-badge" id="saleBadge1">Sale!</div>
       <div class="img"><img src="Images/watermelon.jpg" alt=""></div>
       <div class="title">Watermelon</div>
       <div class="price"><span class="strike">$5</span>$2.50</div>
       <div class="btn-container">
          <button class="btn" id="addToCartBtn1" onclick="addToCart('Watermelon', 2.50)">Add to cart</button>
       </div>                
</div>

shopping.js

/* ADD CELL AFTER PRESSING ADD TO CART */
function addToCart(productName, productPrice) {
    console.log(productName + ', ' + productPrice);
    // Get the table body where cart items will be added
    var cartTableBody = document.querySelector('.shopping-cart');
    console.log(cartTableBody)

    // Create a new row for the cart item
    var newRow = cartTableBody.insertRow();
    console.log(newRow)
    
    // Create cells for product name and price
    var productNameCell = newRow.insertCell(0);
    var productPriceCell = newRow.insertCell(1);
    
    // Set the content of the cells
    productNameCell.textContent = productName;
    productPriceCell.textContent = '$' + productPrice.toFixed(2);
}

Current table created with 1 sample row

 <table class="shopping-cart">
                <tbody>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th style="width: 90px;"></th>
                        <th style="width: 500px;">Product</th>
                        <th style="width: 90px;">Price</th>
                        <th style="width: 160px;">Quantity</th>
                        <th style="width: 90px;">Subtotal</th>
                    </tr>
                    <tr>
                        <td class="cross-symbol">
                            <div class="circle"  onclick="deleteRow(this)">&times;</div>
                        </td>
                        <td class="image-cell">
                            <img src="Images/watermelon.jpg">
                        </td>
                        <td>Watermelon</td>
                        <td>$2.50</td>
                        <td>
                            <div class="quantity">
                                <button class="minus">-</button><input type="text" class="number" value="1" min="1"><button class="plus">+</button>
                            </div>
                        </td>
                    </tr>
                </tbody>

Pictures for reference

As you can see from the above two images, what I want is to press the "add to cart" of watermelon, and the content of the cards will be updated in the shopping cart corresponding to the header of the table.

Would really appreciate it if someone could help me with this. You can always DM me to discuss! Thanks!

• javascript
• html

Share Improve this question Follow edited Oct 3, 2023 at 17:05 Daniel A. White 191k4949 gold badges379379 silver badges466466 bronze badges asked Oct 2, 2023 at 18:23 OkayOkay 3311 gold badge11 silver badge99 bronze badges 5

• Are you including shopping.js in the same HTML file as your <button onclick="addToCart('Watermelon', 2.5)">? Did you open your browser's Console tab to see if you have any JS errors? "Nothing happened" isn't the most useful debugging statement (but there are worse, i.e. "didn't work")... – Tim Lewis Commented Oct 2, 2023 at 18:30
• @TimLewis Yes, shopping.js is already included in html file. I've opened the console log and it just says there's error with "insertRow()" – Okay Commented Oct 2, 2023 at 19:35
• When an error is triggered in JS, it stops all subsequent code execution, so the "nothing happened" is triggered by that. What is the error that's being triggered? Did you look it up and try to figure it out? Being able to debug your code by encountering and fixing errors is a critical skill of being a developer. – Tim Lewis Commented Oct 2, 2023 at 19:37
• @TimLewis I tried to look up the error but to no avail. Thats why I had no choice but to post my problem here. From what ChatGPT says, it is because the js function couldn't find a related table to insert my content into, and told me to check the "id" of my table whether it corresponds to the querySelector. But mine already corresponds.. – Okay Commented Oct 2, 2023 at 19:40
• ChatGPT is not a reliable source for debugging code (in my experience anyway). Again, what is the actual error? It's fine to post your problem here, but you didn't really post your problem here (i.e. you omitted what is arguably the most important part of your problem, which is the actual error message

  本文标签：

  版权声明：本文标题：javascript - How to create an "Add To Cart" button and update the product to a table corresponds to the header 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744542316a2611685.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。