JavaScript开发支出追踪器如何实现条目增减时总价自动更新

• 第一步：先在HTML中添加总金额展示节点，示例如下：

<!-- 可以放在表格的下方任意位置 -->
<p>当前总金额：<span id="totalPrice">0</span></p>

• 第二步：调整JavaScript代码，完整修改后代码如下，标注了核心修改点：

const itemname = document.querySelector('#itemname');
const price = document.querySelector('#price');
// 新增：全局总金额变量 + 总金额展示节点获取
let totalAmount = 0;
const totalPriceDom = document.querySelector('#totalPrice');

// 新增：总金额更新函数
const updateTotal = () => {
    // 保留两位小数展示，避免浮点运算精度问题
    totalPriceDom.textContent = totalAmount.toFixed(2);
}

//set requirements and limitations
const isRequired = value => value === '' ? false : true;
// 新增：判断是否为有效数字
const isValidNumber = value => !isNaN(Number(value));

//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();
    const priceNum = Number(priceTrim);

    if(!isRequired(itemnameTrim)){
        showError(itemname, "请输入条目名称！");
    }else if(!isRequired(priceTrim)){
        showError(price, "请输入价格！");
    }else if(!isValidNumber(priceTrim) || priceNum <= 0){
        showError(price, "请输入大于0的有效数字");
    }else{
        showSuccess(itemname);
        showSuccess(price);
        valid = true;
    }
    return valid;
}

const addItem = () => {
    const itemnameTrim = itemname.value.trim();
    const priceTrim = price.value.trim();
    const priceNum = Number(priceTrim);

    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 tableDataPrice = document.createElement("td");
    const tableTxtnodePrice = document.createTextNode(priceTrim);
    tableRowItem.appendChild(tableDataPrice);
    tableDataPrice.appendChild(tableTxtnodePrice);
    
    // 新增：总金额累加
    totalAmount += priceNum;
    updateTotal();

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

//Deduct button
const deductItem = () => {
    const itemnameTrim = itemname.value.trim();
    const priceTrim = price.value.trim();
    const priceNum = Number(priceTrim);

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

    tableRowItem.className = 'redtext';
    tableRowItem.appendChild(tableDataItem);
    tableDataItem.appendChild(tableTxtnode);
    document.getElementById("td-item").appendChild(tableRowItem);

    const tableDataPrice = document.createElement("td");
    // 扣减项价格前加负号标识
    const tableTxtnodePrice = document.createTextNode(`-${priceTrim}`);
    tableRowItem.appendChild(tableDataPrice);
    tableDataPrice.appendChild(tableTxtnodePrice);
    
    // 新增：总金额扣减
    totalAmount -= priceNum;
    updateTotal();

    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(){
    // 校验通过才执行添加
    if(checkItemname()) addItem();
});

deductBtn.addEventListener("click", function(){
    // 新增：扣减也先做表单校验
    if(checkItemname()) deductItem();
});

• 核心修改说明：
  • 新增了全局变量存储总金额，新增专门的更新函数负责把总金额渲染到页面
  • 补充了价格的有效性校验，避免输入非数字内容导致计算错误
  • 添加/扣减条目时同步修改总金额，再调用更新函数刷新页面展示
  • 给扣减按钮也加上了表单校验逻辑，避免空内容提交

内容的提问来源于stack exchange，提问作者cks_29