The "add to cart" button is unresponsive

Question

The "add to cart" button is unresponsive

My issue is that the add to cart button on my website is not responding properly. I have implemented JavaScript on the add to cart button, where I have assigned an attribute called data-product with a value of {{product.id}}.

var updateBtns = document.getElementsByClassName('update-cart')

for (var i = 0; i < updateBtns.length; i++) {
  updateBtns[i].addEventListener('click', function() {
    var productId = this.dataset.product
    var action = this.dataset.action
    console.log('productId:', productId, 'action:', action)

  })
}

<div class="card-body">
  <h5 class="card-title fw-bold text-uppercase">{{product.name}}</h5>
  <p class="card-text">
    <h4 style="font-size: 1rem; padding: 0.3rem;
            opacity: 0.8;">$ {{product.price}} </h4>
  </p>
  <button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">ADD TO CART</button>
</div>
</div>

Despite clicking on the Add to Cart button multiple times, nothing is being displayed in the console.

javascript html css django

Answer 1

Answer №1

Try using querySelectorAll instead of getElementsByClassName. According to @tacoshy, getElementsByClassName returns an HTML Collection object, not an array. Additionally, the length property will count the elements in an array, not an object.

const updateBtns = document.querySelectorAll('.update-cart')

updateBtns.forEach((updateBtn) => {
    updateBtn.addEventListener('click', (event) => {
        var productId = updateBtn.dataset.product
        var action = updateBtn.dataset.action

        console.log('productId:', productId, 'action:', action)
    })
})

Answer 2

Try using querySelectorAll instead of getElementsByClassName. According to @tacoshy, getElementsByClassName returns an HTML Collection object, not an array. Additionally, the length property will count the elements in an array, not an object.

const updateBtns = document.querySelectorAll('.update-cart')

updateBtns.forEach((updateBtn) => {
    updateBtn.addEventListener('click', (event) => {
        var productId = updateBtn.dataset.product
        var action = updateBtn.dataset.action

        console.log('productId:', productId, 'action:', action)
    })
})

The "add to cart" button is unresponsive

Answer №1

Similar questions

Using ng-value does not trigger any updates to the Ng-model

What is the purpose of using the http module to specify the port when the app.listen function already sets the

Receiving an undefined value of x in AJAX and web API

Creating linear overlays in Tailwind CSS can be achieved by utilizing the `bg-gradient

NodeJS Exporting Features

What is the best way to upload a file to a server while working with Vue.js in the Filemanager plugin, or how can I access a global function

What is the best way to create a website where images align perfectly with stacked cards?

Omit a specific page from the primary Next.js layout within the application directory

Error message: "Unable to access 'title' property of an undefined value" for an item with a length of 1

Passing a div's ID value using AngularJS AJAX to store it in a PHP variable

Node Express app issue: Only one page is not having CSS applied

I continue to encounter an error every time I attempt to place an HTML nested div on a separate line

The Bootstrap 4 navbar remains consistently visible on mobile devices

Challenge encountered when attempting to remove elements from an array within a for loop

When the page is refreshed, the route fails to load the data

Exploring test scenarios with django-jenkins

Ways to change the URL post saving a cookie with express?

dynamically open ngx-bootstrap accordion panels

Choosing a nested object within a JavaScript object

Enumerated type alias in Typescript