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

• 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