如何在添加带有price的项目时自动添加和更新总价

Question

我一直在学习javascript，我正在做我的第二个项目，名为"费用跟踪器";我已经能够使用DOM和函数，但不能在操作符上正确执行。

我有两个输入文本，第一个是"项目名称"第二个是"price"。

我有两个按钮，第一个是"第二个是"扣除"。

问题是我很困惑，创建函数的操作符，能够获得总价和自动更新总每当我添加项目。

我想实现:

每当我添加Item时，当前总价将自动更新。当我扣除项目时，当前总价将自动更新。

这是Javascript。我可以添加和附加项目和价格，但不知道如何添加和扣除自动总价。

const itemname = document.querySelector('#itemname');
const price = document.querySelector('#price');


//set requirements and limitations
const isRequired = value => value === '' ? false : true;

//set error trapping and message

const showError = (input, message) => {
const formgroup = input.parentElement;

formgroup.classList.remove('success');  
formgroup.classList.add('error');

const error = formgroup.querySelector('small');
error.textContent = message;
}
const showSuccess = (input, message) => {
const formgroup = input.parentElement;

formgroup.classList.remove('error');
formgroup.classList.add('success');

const error = formgroup.querySelector('small');
error.textContent = message;
}

// Verifying fields if correct
const checkItemname = () =>{
let valid = false;
const itemnameTrim = itemname.value.trim();
const priceTrim = price.value.trim();

if(!isRequired(itemnameTrim)){
showError(itemname, "Pls type item name!");
}
else if(!isRequired(priceTrim)){
showError(price, "Pls type price!");
}
else{
showSuccess(itemname);
showSuccess(price);
addItem();
valid = true;
}
return valid;
}

const addItem = () => {
const itemnameTrim = itemname.value.trim();

const tableRowItem = document.createElement("tr");
const tableDataItem = document.createElement("td");
const tableTxtnode = document.createTextNode(itemnameTrim);

tableRowItem.appendChild(tableDataItem);
tableDataItem.appendChild(tableTxtnode);
document.getElementById("td-item").appendChild(tableRowItem);

const priceTrim = price.value.trim();

const tableDataPrice = document.createElement("td");
const tableTxtnodePrice = document.createTextNode(priceTrim);

tableRowItem.appendChild(tableDataPrice);
tableDataPrice.appendChild(tableTxtnodePrice);

document.getElementById("itemname").value = "";
document.getElementById("price").value = "";
}
//Deduct button
const deductItem = () => {
const itemnameTrim = itemname.value.trim();
const tableRowItem = document.createElement("tr");
const tableDataItem = document.createElement("td");
const tableTxtnode = document.createTextNode(itemnameTrim);
tableRowItem.className = 'redtext';
console.log(tableRowItem);
tableRowItem.appendChild(tableDataItem);
tableDataItem.appendChild(tableTxtnode);
document.getElementById("td-item").appendChild(tableRowItem);

const priceTrim = price.value.trim();
const tableDataPrice = document.createElement("td");
const tableTxtnodePrice = document.createTextNode(priceTrim);
tableRowItem.appendChild(tableDataPrice);
tableDataPrice.appendChild(tableTxtnodePrice);

document.getElementById("itemname").value = "";
document.getElementById("price").value = "";
}

//Call the buttons and evoke functions
const deductBtn = document.querySelector('#deductBtn')
const addBtn = document.querySelector('#addBtn')
addBtn.addEventListener("click", function(){
checkItemname()});
deductBtn.addEventListener("click", function(){
deductItem()});

Answer 1

$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}