如何仅使用纯javascript实时计算我对总id的输入

Question

我的问题是它没有响应，我确保用文档加载。addEventListener('DOMContentLoaded'，function(event({这帮助我重置了我的输入，然而，当得到实际的计算时，似乎没有更新，我应该研究什么方法，

这是我的代码，

document.addEventListener('DOMContentLoaded'，函数(事件(｛

document.getElementById("input").onkeyup = function() {calc()};
function calc(){
var in_bottles = parseInt(document.getElementById('in_bottles').value,);
var in_bags = parseInt(document.getElementById('in_bags').value, "");
var in_wrapping = parseInt(document.getElementById('in_wrapping').value, "");
var in_yogurt = parseInt(document.getElementById('in_yogurt').value, "");
var in_takeout = parseInt(document.getElementById('in_takeout').value, "");
var in_cups = parseInt(document.getElementById('in_cups').value, "");
var in_packaging = parseInt(document.getElementById('in_packaging').value, "");
var in_detergent = parseInt(document.getElementById('in_detergent').value, "");
var in_shampoo = parseInt(document.getElementById('in_shampoo').value, "");
var in_toothbrushes = parseInt(document.getElementById('in_toothbrushes').value, "");
var in_toothpaste = parseInt(document.getElementById('in_toothpaste').value, "");
document.getElementById('total_per_year').innerHTML = in_bottles + in_bags + in_wrapping + in_yogurt + in_yogurt + in_takeout + in_cups + in_packaging + in_detergent + in_shampoo + in_toothbrushes + in_toothpaste;

从html来看，它是这样的，它是一门课程的一部分，所以限制是我不能编辑html，所以我想我可能需要这样处理它？这是我的尝试

食品&厨房

<table>
<tr>
<td><label for="in_bottles">Plastic bottles</label></td>
<td><input id="in_bottles" name="bottles" type="number" value="0" min="0" data-weight="0.730"> / week</td>
</tr><tr>
<td><label for="in_bags">Plastic bags</label></td>
<td><input id="in_bags" name="bags" type="number" value="0" min="0" data-weight="0.417"> / week</td>
</tr><tr>
<td><label for="in_wrapping">Food wrapping</label></td>
<td><input id="in_wrapping" name="wrapping" type="number" value="0" min="0" data-weight="0.583"> / week</td>
</tr><tr>
<td><label for="in_yogurt">Yogurt, cream, etc. containers</label></td>
<td><input id="in_yogurt" name="yogurt" type="number" value="0" min="0" data-weight="0.383"> / week</td>
</tr>
</table>
</section>
<section id="sec_packaging">
<h2>Disposable Containers &amp; Packaging</h2>
<table>
<tr>
<td><label for="in_takeout">Take-away plastic boxes</label></td>
<td><input id="in_takeout" name="takeout" type="number" value="0" min="0" data-weight="0.383"> / month</td>
</tr><tr>
<td><label for="in_cups">Take-away cups</label></td>
<td><input id="in_cups" name="cups" type="number" value="0" min="0" data-weight="0.240"> / month</td>
</tr><tr>
<td><label for="in_packaging">Plastic-wrapped packages</label></td>
<td><input id="in_packaging" name="packaging" type="number" value="0" min="0" data-weight="0.834"> / month</td>
</tr>
</table>
</section>
<section id="sec_washing">
<h2>Bathroom &amp; Laundry</h2>
<table>
<tr>
<td><label for="in_detergent">Detergent &amp; cleaning product bottles</label></td>
<td><input id="in_detergent" name="detergent" type="number" value="0" min="0" data-weight="0.120"> / year</td>
</tr><tr>
<td><label for="in_shampoo">Shampoo, conditioner &amp; toiletries</label></td>
<td><input id="in_shampoo" name="shampoo" type="number" value="0" min="0" data-weight="0.080"> / year</td>
</tr><tr>
<td><label for="in_toothbrushes">Plastic toothbrushes</label></td>
<td><input id="in_toothbrushes" name="toothbrushes" type="number" value="0" min="0" data-weight="0.020"> / year</td>
</tr><tr>
<td><label for="in_toothpaste">Toothpaste</label></td>
<td><input id="in_toothpaste" name="toothpaste" type="number" value="0" min="0" data-weight="0.015"> / year</td>
</tr>
</table>
</section>

你的塑料足迹

<p>Your estimated plastic footprint is <span id="total_per_year">0</span> kg / year.</p>
<p>The gobal average is ~50 kg / year.</p>
<p>The USA average is ~84 kg / year.</p>
<p>The Eurpean average is ~30 kg / year.</p>
<p><button id="reset">Reset calculator</button></p>
</section>

Answer 1

EDIT：我回到我的电脑上，这里有一个全新的答案，也涵盖了旧的答案：

编辑2：我添加了数据集的使用，以获得您在示例中使用的数据权重属性

const btn = document.getElementById('reset');
const total = document.getElementById('total_per_year');
const htmlCollection = document.getElementsByTagName("input");
let inputs = [...htmlCollection];
let totalValue = 0;
function reset() {
inputs.forEach(input => {
input.value = 0
})
total.innerText = 0;
}
//Add eventlistneres for "change" and "keyup" to all inputs and execute sumTotal when event is triggered
//Note that change is triggered when the user "leaves" the input box or clicks the increment arrows so keyup is added to register direct inputs and update before the user leaves the box
function addEventListeners() {
inputs.forEach(input => {
input.addEventListener('change', () => {
totalValue = 0;
sumTotal();
});
input.addEventListener('keyup', () => {
totalValue = 0;
sumTotal();
});
})
}
//Summerize the value of each imput and set the totalValue and eliminate crazy decimals then display it 
function sumTotal(value) {
inputs.forEach(input => {
totalValue += Number(input.value) * Number(input.dataset.weight);
})
total.innerText = totalValue.toFixed(2);
}
//When the DOM content is loaded we run the function that adds the eventListeners
document.addEventListener('DOMContentLoaded', () => {
addEventListeners();
})

btn.addEventListener("click", () => {
reset()
})

<input type="number" value="0" data-weight="0.43" />
<input type="number" value="0" data-weight="0.71" />
<input type="number" value="0" data-weight="1.65" />
<input type="number" value="0" data-weight="1.19" />
<input type="number" value="0" data-weight="2.44" />
<p>Your estimated plastic footprint is <span id="total_per_year">0</span> kg / year.</p>
<button id="reset">Reset</button>