on click event with JavaScript doesn't work in Django

Question

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

var211 · Accepted Answer · 2022-04-15 19:09:12Z

2

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)

answered Apr 15, 2022 at 19:09

var211

6066 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Osama Mohammed Over a year ago

working , thanks, actually i followed a video, and he made it like what I did, and it is working in his case, I have his source code from GitHub, but I don't know what is the different

var211 Over a year ago

No problem. Original code can work too, in some cases, depending on a browser etc. But with document.addEventListener('DOMContentLoaded', ... it should work almost always, at least in all modern browsers.

Jeff Mwangi · Accepted Answer · 2022-08-02 14:21:21Z

0

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

edited Aug 2, 2022 at 14:21

answered Aug 2, 2022 at 14:19

Jeff Mwangi

12 bronze badges

Collectives™ on Stack Overflow

on click event with JavaScript doesn't work in Django

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related