我试图创建一个购物车页面,能够使用添加或减去按钮来减少或增加输入的值,但eventlistener似乎不工作,我已经尝试了许多不同的解决方案,并让它正常工作。
{% extends "base.min.html" %}
{% block body_block %}
{% load static %}
<div class='container'>
<a class='back-link' href="/"> Back to Catalog</a>
<h1 class='cart-h1'>Cart </h1>
<div class='cart'>
<div class='requests'>
<div class='request'>
<img src='https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png' alt='request image'>
<div class='request-info'>
<p class='request-name'>Request: {{ requestName }}</p>
<p class='request-details'>Details: {{ requestDetails }}</p>
<p class='request-qty'>Qty: {{ requestQty }}
<div class='qty-container'>
<input type='button' value='+' class='qtyplus' id='plus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' id='inputQty' />
<input type='button' value='-' class='qtyminus' id='minus' field='quantity' />
</div>
</p>
<p class='qty-remove'></p>
<span class='remove'>Remove</span>
</div>
</div>
</div>
</div>
</div>
</br>
<div class='hidden-container'>
<p>Checkout Confirmation #: {{confirmNum}}</p>
</div>
<script type="module" src="{% static '\js\supplyshop\pageload\RequestManagementLoad.min.js' %} " type ="text/javascript"></script>
{% endblock %}
const plusBtn = document.querySelector('#plus')
const minusBtn = document.querySelector('#minus')
const inputQty = document.querySelector('#inputQty')
// increment/decrement value on input field
// add eventlisteners on +/- buttons to update the value field
plusBtn.addEventListener('click', e => {
e.preventDefault()
inputQty.value = parseInt(inputQty.value) + 1
})
minusBtn.addEventListener('click', e => {
e.preventDefault()
if (inputQty.value <= 0) {
inputQty.value = 0
}
inputQty.value = parseInt(inputQty.value) - 1
})
我试过使用递增/递减保存数量值的输入字段的值。我也试过使用html中的onclick函数,并创建一个函数来做同样的事情,但我可能会用错误的方法来做,因为没有任何东西能正常工作。我期望的行为是点击加号或减号按钮以及中间的数字(输入字段)将增加一个或减少一个,如果点击加/减按钮。我还想确保该值不能低于0。
- 1-
1条答案
按热度按时间y4ekin9u1#
检查以下内容:
minusBtn.addEventListener('单击',e =〉{ e.预防默认值()
})