用javascript总结用户输入

Question

我正在尝试将用户输入存储在变量中并输出它。事实上，我认为这会很容易，但现在我被的任务卡住了

我正试图将其存储在一个数组中。但如果它只是存储在一个变量中，并且我可以输出它，我也会很高兴。我已经找了很长时间了，但我觉得我不知道该找什么

这是我的代码：

let inputValuePrice = document.getElementById("myInput2").value;
let outputSumme = document.getElementById("summe");
outputSumme = parseFloat(inputValuePrice);
let sum = [];
sum.push(outputSumme);
console.log(sum);

<input type="number" id="myInput2" />
<input type="text" id="summe" />

编辑：对不起。我会再详细解释一遍。我想在每个条目后面加上数字。这是一种有产品和价格的待办事项列表。每种产品都与价格一起逐一输入。然后我想把每种产品的价格加起来。在这种情况下，如果它是控制台中的第一个输出，对我来说就足够了。如果它是正确的，那么我会让它输出到html。

Answer 1

如果需要将所有输入值的总和计算为整数或浮点数，这非常简单。您可以使用一个简单的函数对所有数组元素求和，如下所示：

let inputValuePrice = document.getElementById("myInput2").value;
let outputSumme = document.getElementById("summe");
outputSumme = parseFloat(inputValuePrice);
let sum = [];
sum.push(outputSumme);      
console.log(getSumOfArray(sum));  
function getSumOfArray(array){
let sumOfElements=0;
for (let i=0;i<array.length;i++){
sumOfElements=sumOfElements+array[i];
}
return sumOfElements;
}

Answer 2

如果数组元素都是数字，则可以使用reduce运算符，如下所示：

const sumOfArray = sum.reduce((a, b) => a + b, 0)

Answer 3

不幸的是，我不明白它是如何工作的。我现在在代码中的indexedDB中有价格的产品。在那里，我想把它们读出来，然后再把它们总结成一个数组。我会把整个代码发给你。我将非常感谢你的解释。我的想法出了什么问题？这是我的密码。这个代码段位于一个函数中，当运行时，该函数会将产品放在HTML中的列表中。产品是在foreach循环中创建的，在这个循环中，我截取价格，并将它们发送到函数之外的另一个函数，然后该函数就有了要计算的数据。我希望这是可以理解的。我将在这个线程的末尾链接整个代码。

let products = makeTransaction('produkte', "readonly");
let request = products.getAll();
request.addEventListener('success', (event) => {
event.preventDefault();
document.querySelector('#product-list').innerHTML = "";
let data = event.target.result;
data.forEach((element) => {
/*-----------Elemente Kreieren------------*/
let li = document.createElement("li");
let edit = document.createElement('i');
let spanPrimary = document.createElement('span');
let inputLabel = document.createElement('label');
let productName = document.createElement('span');
let productPrice = document.createElement('span');
let spanSecondary = document.createElement('span');
let checkBox = document.createElement('input');
let closeBtn = document.createElement("span");
/*-----------Elemente einfügen------------*/
li.setAttribute('data-key', element.id);
productName.appendChild(document.createTextNode(element.title));
productPrice.appendChild(document.createTextNode(element.price + " €"));
spanPrimary.appendChild(productName);
spanPrimary.appendChild(productPrice);
inputLabel.appendChild(checkBox);
spanSecondary.appendChild(inputLabel);
li.appendChild(edit);
li.appendChild(spanPrimary);
li.appendChild(spanSecondary);
li.appendChild(closeBtn);
/*-----------Elemente klassifizieren------------*/
li.className = "mdl-list__item mdl-shadow--2dp";
edit.className = "material-symbols-outlined icon-edit-document";
edit.textContent = 'edit_document';
spanPrimary.className = "mdl-list__item-primary-content";
spanSecondary.className = "mdl-list__item-secondary-action";
inputLabel.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"; 
productName.className = 'product-text';
productPrice.className = 'product-preis';
checkBox.className = "mdl-checkbox__input";
checkBox.setAttribute('id', 'my-id');
checkBox.setAttribute('type', 'checkbox');
closeBtn.className = "material-symbols-outlined hiding-list-item";
closeBtn.textContent = 'close';
componentHandler.upgradeElement(li);
let list = document.getElementById("product-list").appendChild(li);
// Füge die "edit" Funtion hinzu
let editieren = document.getElementsByClassName("icon-edit-document");
for (let i = 0; i < editieren.length; i++) {
editieren[i].onclick = function() {
showProducts(element.id);
}
}
// Füge die "close" Button Funktion hinzu
let close = document.getElementsByClassName("hiding-list-item");
for (let i = 0; i < close.length; i++) {
close[i].onclick = function() {
deleteProduct();
}
}
// Function for totalizing product prices
let produktPreis = element.price
sumPrice(produktPreis);

}); 
});
request.addEventListener('error', (event) => {
console.log(event.target.error);
});
}

现在求和。。。

function sumPrice(produktPreis) {
produktPreis = parseFloat(produktPreis);
let arr = [];
arr.push(produktPreis);
console.log(getSum(arr));
console.log(sumOfArray);
function getSum(array) {
let sumOfElements = 0;
for (let i = 0; i < arr.length; i++) {
sumOfElements = sumOfElements + array[i];
}
return sumOfElements;
}
}

我总是能够帮助自己。但我不能再对这个所谓简单的事情做任何进一步的解释了。以及为了完整性。这是我临时托管的网站和Github。也感谢你以前的答复。

项目站点https://liquefied-stripe.000webhostapp.com/

Githubhttps://github.com/StevoEs/Einkaufsliste/blob/main/main.js

谢谢！