Javascript 将单击事件添加到div以更改隐藏的输入值

我试图让两个div充当复选框（以便用户可以选择0或全部），这将影响从0开始的总计的隐藏输入值。我通过切换引导颜色类来显示已选择的用户，并基于该类将值添加到下面隐藏的总输入值中，从而针对单击的div。我可以让总数完全改变，但我正试图根据单击/取消单击的内容对总数进行加减。现在，我的代码返回一个“uncaughttypeerror:无法将属性'value'设置为null”。您能给予的任何帮助都将不胜感激

$（文档）.ready（函数（）{
$（'.select class'）。在（'click'，function（）上{
//切换单击的divs以显示所选内容
$（this.toggleClass（'color'）；
//如果单击div，则将值添加到总计（0）（具有颜色类）
if（this.classList.contains（'color'））{
//地址1：
var addTotal1=Number（document.getElementsByName（'total1'）.value）；
var addSingle1=Number（document.getElementById（this.id.toString（）+'add1'）.value）；
addTotal1+=addSingle1；
document.getElementById（'totaladd1'）。value=addTotal1.toString（）；
//地址2：
var addTotal2=Number（document.getElementsByName（'total2'）.value）；
var addSingle2=Number（document.getElementById（this.id.toString（）+'add2'）.value）；
addTotal2+=addSingle2；
document.getElementById（'totaladd2'）。value=addTotal2.toString（）；
//地址3：
var addTotal3=Number（document.getElementsByName（'total3'）.value）；
var addSingle3=Number（document.getElementById（this.id.toString（）+'add3'）.value）；
addTotal3+=addSingle3；
document.getElementById（'totaladd3'）。value=addTotal3.toString（）；
}
//如果未勾选div，则减去值（没有颜色类）
如果（！this.classList.contains（'color'））{
//地址1：
var addTotal1=Number（document.getElementsByName（'total1'）.value）；
var addSingle1=Number（document.getElementById（this.id.toString（）+'add1'）.value）；
addTotal1-=addSingle1；
document.getElementById（'totaladd1'）。value=addTotal1.toString（）；
//地址2：
var addTotal2=Number（document.getElementsByName（'total2'）.value）；
var addSingle2=Number（document.getElementById（this.id.toString（）+'add2'）.value）；
addTotal2-=addSingle2；
document.getElementById（'totaladd2'）。value=addTotal2.toString（）；
//地址3：
var addTotal3=Number（document.getElementsByName（'total3'）.value）；
var addSingle3=Number（document.getElementById（this.id.toString（）+'add3'）.value）；
addTotal3-=addSingle3；
document.getElementById（'totaladd3'）。value=addTotal3.toString（）；
}
})
});

内容

内容


默认情况下，将添加输入设置为禁用
在每个总输入中添加一个
data total=“
”。在数据内放置添加输入对选择器，即：
”。添加1“
等
在单击时切换类，并搜索未禁用的

添加输入，将其值减少为累积数。将该数字设置为迭代总输入值

jQuery（函数（$）{
函数calculateTot（）{
$（“[data total]”）。每个（函数（）{
常量对=$（this.dataset.total）.not（':disabled'）.get（）；
$（this.val（pair.reduce（（n，el）=>（n+=+el.value，n），0））
});
}
$（'.select class'）。在（'click'，function（）上{
$（this.toggleClass（'is-selected'）；
$（this）.find（'input'）.prop（'disabled'，！$（this）.is（'is selected'））；
calculateTot（）；
}).find（'input'）.prop（'disabled'，true）；//默认情况下禁用输入
calculateTot（）；//在DOM就绪时也进行计算
});
。选择类{光标：指针；填充：8px；边框半径：1em；边框：1px实心#000；}
.已选择{背景：#0bf；}
.d-none{display:none；}

内容1-选择我
内容2-选择我
密切相关：问题应包括证明问题所需的最低代码；您提供的代码显然不是所有需要的。非常感谢！这很有魅力。我真的需要练习箭头功能！