我试图创建两个数字输入,每个都有自己的自定义"+"和"-"按钮.然而,在我当前的代码中,按钮功能似乎只在某些时候起作用.在其他情况下,我得到一个Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLButtonElement.<anonymous>错误.

这是HTML:

<div class="col">
    <div class="row">
        <div class="input-group mx-auto w-50">
            <div class="input-group-prepend">
                <button class="btn btn-dark btn-sm minus" data-id="one"
                    type="button"><i class="fa fa-minus"></i></button>
            </div>
            <input type="number" id="one" 
                class="form-control form-control-sm text-center" value="0">
            <div class="input-group-prepend">
                <button class="btn btn-dark btn-sm plus" data-id="one" type="button"><i
                        class="fa fa-plus"></i></button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="input-group mx-auto w-50">
            <div class="input-group-prepend">
                <button class="btn btn-dark btn-sm minus" data-id="two"
                    type="button"><i class="fa fa-minus"></i></button>
            </div>
            <input type="number" id="two"
                class="form-control form-control-sm text-center" value="0">
            <div class="input-group-prepend">
                <button class="btn btn-dark btn-sm plus" data-id="two" type="button"><i
                        class="fa fa-plus"></i></button>
            </div>
        </div>
    </div>
</div>

这是Javascript:

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('.minus').forEach(item => {
        item.addEventListener('click', event => {
            var input_id = event.target.getAttribute('data-id')
            console.log('Minus button clicked for input ' + input_id)
            var quantityInput = document.getElementById(input_id);
            var currentQuantity = parseInt(quantityInput.value);
            quantityInput.value = currentQuantity - 1
        })
    })
    document.querySelectorAll('.plus').forEach(item => {
        item.addEventListener('click', event => {

            var input_id = event.target.getAttribute('data-id')
            console.log('Plus button clicked for input ' + input_id)
            var quantityInput = document.getElementById(input_id);
            var currentQuantity = parseInt(quantityInput.value);
            quantityInput.value = currentQuantity + 1
        })
    })
})

以下是单击几个按钮后的输出示例:

Sample output after clicking a few buttons

推荐答案

event.target可能是按钮内的跨度,因此代码可能找不到data-id属性.相反,可能不使用event.target就可以获得id.使用itemevent.currentTarget.

Javascript相关问答推荐

JavaScript .Click()函数不起作用

使用JavaScript重命名对象数组中的键

一次仅播放一个音频

docx.js:如何在客户端使用文档修补程序

如何禁用附加图标点击的v—自动完成事件

如何在Obsidian dataview中创建进度条

如何将Map字符串,布尔值转换为{key:string;value:bo布尔值;}[]?<>

阿波罗返回的数据错误,但在网络判断器中是正确的

Regex结果包含额外的match/group,只带一个返回

PDF工具包阿拉伯字体的反转数字

S文本内容和值不必要的不同

我怎么在JS里连续加2个骰子的和呢?

检索相加到点的子项

覆盖加载器页面避免对页面上的元素进行操作

如何在Bootstrap中减少网格系统中单个div的宽度

为什么我的按钮没有从&q;1更改为&q;X&q;?

每次重新呈现时调用useState initialValue函数

ngOnChanges仅在第二次调用时才触发

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题