django 数量和值字段的增减

jyztefdp  于 2023-02-20  发布在  Go
关注(0)|答案(1)|浏览(127)

我试图创建一个购物车页面,能够使用添加或减去按钮来减少或增加输入的值,但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-
y4ekin9u

y4ekin9u1#

检查以下内容:
minusBtn.addEventListener('单击',e =〉{ e.预防默认值()

if (inputQty.value <= 0) {
    inputQty.value = 0
}else{
  inputQty.value = parseInt(inputQty.value) - 1
}

})

相关问题