添加带有价格的商品时如何自动添加和更新总价答案

【问题标题】：How to automatically add and update the price total when adding an item with price添加带有价格的商品时如何自动添加和更新总价
【发布时间】：2021-11-16 10:44:33
【问题描述】：

我一直在学习 javascript，我正在做我的第二个项目，名为“费用跟踪器”，我已经能够使用 DOM 和函数，但无法在运算符上正确执行。

我有 2 个输入文本，第一个是“商品名称”，第二个是“价格”。

我有两个按钮，第一个是“加”，第二个是“减”。

问题是我很困惑，无法在运算符上创建能够获取总价并在我添加项目时自动更新总价的函数。

我想实现：

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

这是 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()});

【问题讨论】：

你会发布你尝试过的东西，包括 HTML 和 javascript 吗？
很难想象你到底想要什么。如果您可以添加一些代码并添加您期望的内容，那就太好了，如果您添加一些代码，那么更多的人会很乐意提供帮助。 ??????
您好添加了javascript代码

标签： javascript ecmascript-6 operator-keyword

【解决方案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));
}

【讨论】：