CODEWITHSUNDEEP
javascriptdjangoonclick
Osama Mohammed
Osama Mohammed

Reputation: 2871

on click event with JavaScript doesn't work in Django

this is the code for (cart.js) in the static/js folder

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

for (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)
        
    })
}

and in the HTML file in the bottom:

<button data-product="{{ product.id }}" data-action="add"
                class="update-cart btn btn-outline-secondary add-btn ">Add to Cart</button>

and call the js in main.html

<script type="text/javascript" src="{% static 'js/cart.js' %}"> </script>

and I add static in the setting.py, and everything correct.

and everything working well, when I try to (console.log) without a button click event... the problem is only with the button event because it doesn't work

Upvotes: 0

Views: 1001

Answers (2)

Jeff Mwangi
Jeff Mwangi

Reputation: 1

I might be late to answer this question, but it might help someone in the future.

Solution: Make sure your script tags:

<script type="text/javascript" src="{% static 'js/cart.js' %}"> </script>

is between the body tags

Upvotes: 0

var211
var211

Reputation: 606

Your question is not related to Django. It seems that you do not use JavaScript correctly. When the browser executes code from card.js the HTML DOM tree is not yet built. To attach JS events you need to change cart.js code to:

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

    for (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)
        })
    }
}

document.addEventListener('DOMContentLoaded', initUpdateBtns)

Upvotes: 2

Related Questions