JavaScript 的点击事件在 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

Answer 1

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)

Answer 2

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