Having trouble reducing the total in this small todo app

December 10, 2022

I am having a hard time trying to figure out how to get the the value from every new Li and reduce it (add) to then output to my h2. Can’t figure out what I am doing wrong. Any help would be greatly appreciated! Codepen: https://codepen.io/Chasehud26/pen/Poagjwy

I tried to console.log different variables to see if there were any hints of what is going wrong.

const form = document.querySelector("form")
const nameInput = document.querySelector("#name-input")
const priceInput = document.querySelector("#price-input")
const button = document.querySelector("button")
const nameUl = document.querySelector("#item-name")
const priceUl = document.querySelector("#item-price")
const h2 = document.querySelector("h2")

const nameLi = document.createElement("li")
const priceLi = document.createElement("li")


form.addEventListener("submit", function (e) {
    e.preventDefault()

    let nameVal = nameInput.value
    let priceVal = priceInput.value

    const nameLi = document.createElement("li")
    const priceLi = document.createElement("li")


    nameUl.appendChild(nameLi)
    nameLi.innerHTML = nameInput.value

    priceUl.appendChild(priceLi)
    priceLi.textContent = `${priceInput.value}`

    showTotals()
})


//TRYING TO ADD TOGETHER ALL THE PRICE VALUES AND THEN PUT IT TO MY H2//
function showTotals() {
    const priceList = document.querySelectorAll("li")

    for (let priceLists of priceList) {
        const total = []
        total.push(parseFloat(priceLists.textContent));
        const totalMoney = total.reduce(function (total, item) {
            total += item;
            return total;
        }, 0);

        const finalMoney = totalMoney.toFixed(2);
        h2.textContent = finalMoney;
    }
}

>Solution :

You need to have your const total [] array initialized outside of the for loop. also, when you setup your <li> decorators, you need to differentiate between the number and non-number fields, since the way you had it, it was trying to add the text ‘li’ fields also:

/// truncated for clarity
const nameLi = document.createElement("li")
const priceLi = document.createElement("li")
priceLi.classList.add('num') // <== this line added
//// =================

function showTotals() {
    const priceList = document.querySelectorAll("li.num") // added class 
    const total = [] // <== move this to here
    for (let priceLists of priceList) {
      total.push(parseFloat(priceLists.textContent));
      const totalMoney = total.reduce(function (total, item) {
        total += item;
        return total;
    }, 0);

    const finalMoney = totalMoney.toFixed(2);
    h2.textContent = finalMoney;
}