购物车数量增减按钮事件监听失效问题求助

问题说明 #

开发购物车页面时，点击加减按钮无法增减输入框的商品数量。尝试过直接操作输入框值、HTML中绑定onclick函数等方案均无效。预期效果：点击+按钮输入框值+1，点击-按钮值-1，且值不能低于0。

相关代码 #

Django模板代码 #

{% 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 %}

JavaScript代码 #

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
})

问题原因与修复方案 #

1. 脚本加载时机问题 #

你的JS脚本使用了type="module"，模块脚本默认会延迟加载，可能在DOM元素还未渲染完成时就执行了代码，导致querySelector无法找到按钮和输入框元素，进而无法绑定事件。

修复方式：

• 方案一：将脚本代码包裹在DOMContentLoaded事件中，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', () => {
    const plusBtn = document.querySelector('#plus')
    const minusBtn = document.querySelector('#minus')
    const inputQty = document.querySelector('#inputQty')

    plusBtn.addEventListener('click', e => {
        e.preventDefault()
        inputQty.value = parseInt(inputQty.value, 10) + 1
    })

    minusBtn.addEventListener('click', e => {
        e.preventDefault()
        let currentValue = parseInt(inputQty.value, 10)
        inputQty.value = currentValue > 0 ? currentValue - 1 : 0
    })
})

• 方案二：如果不需要模块功能，可以移除type="module"属性，同时确保脚本放在HTML文档的末尾（</body>标签前）。

2. 减号按钮逻辑错误 #

原代码中减号按钮的逻辑顺序错误，会导致数值变为负数：当输入框值为0时，先判断并设置为0，随后执行减1操作，最终值变成-1。

修复方式：
先获取当前数值，判断如果大于0则减1，否则保持0，如上面修正后的代码所示。

3. parseInt进制问题 #

使用parseInt时建议指定基数（第二个参数设为10），避免因输入值包含特殊字符导致的进制解析错误。

内容的提问来源于stack exchange，提问作者user21237030