我在和姜戈合作。 下面是我的JavaScript代码，在这段代码中，“Hello World”在控制台中得到打印，但是当我单击add to cart时，“Clicked”没有得到打印。
console.log("Hello world");
var updateBtns = document.getElementsByClassName('update-cart');
for (var i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListener('click', function() {
var action = this.dataset.action;
console.log('clicked');
});
}
这是包含按钮的HTML代码的一部分:
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{i.product_name}}</h5>
<p class="card-text">{{i.desc}}</p>
<button data-product="pr{{i.id}}" data-actions="add"
class="btn btn-primary add-btn update-cart">
Add to Cart
</button>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
</div>
{% block js %}
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
{% endblock %}
运行此程序时不会打印任何错误。 请帮帮我。 提前谢谢你。
您可能想这样做
您在操作上也漏掉了一个%s
委托，则完全不需要循环
null
window.addEventListener("load", function() { // on page load
document.querySelector(".container").addEventListener("click", function(e) {
const tgt = e.target;
if (e.target.classList.contains('update-cart')) {
const action = tgt.dataset.actions;
const product = tgt.dataset.product;
const title = tgt.closest(".card-body").querySelector(".card-title").innerText;
// or
const desc = tgt.previousElementSibling.innerText;
console.log(action, product, title, desc );
}
});
});<div class="container carousel-inner no-padding">
<div class="carousel-item active">
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Description 1</p>
<button data-product="pr1" data-actions="add" class="btn btn-primary add-btn update-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Description 2</p>
<button data-product="pr2" data-actions="add" class="btn btn-primary add-btn update-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="carousel-item"></div>
</div>