Solution 1 :

Try replacing expenses.push('expenseStorage') to expenses.push(expenseStorage).
So your code will look like this:

document.getElementById('expenseInput').addEventListener('submit', saveExpense);

function saveExpense(e) {
    let expenseName = document.getElementById('expenseNameInput').value,
        expenseAmount = document.getElementById('expenseAmountInput').value;

    let expenseStorage = {
        name: expenseName,
        amount: expenseAmount,
    }

    if (localStorage.getItem('expenses') == null) {
        let expenses = [];
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    } else {
        let expenses = JSON.parse(localStorage.getItem('expenses'));
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    }

    document.getElementById('expenseInput').reset();
    fetchExpense();

    e.preventDefault();
}

function fetchExpense() {
    let expenses = JSON.parse(localStorage.getItem('expenses')),
        expensesList = document.getElementById('expensesList');

    expensesList.innerHTML = '';

    for (let i = 0; i < expenses.length; i++) {
        let name = expenses[i].name,
            amount = expenses[i].amount;

        expensesList.innerHTML +=   '<div class="well" id="expense-item">' +
                                    '<h3>' + name + '</h3>' +
                                    '<h3>' + amount + '</h3>' +
                                    '<a href="#" onclick="deleteExpense()" class="btn btn-danger">Delete</a>' +
                                    '</div>';
    }
}

Problem :

When creating new div with data from input form, the first div save the data that i inputed, but next, when i input new data, div display undefined value.
first attempt second attempt

0: {name: “Milk”, amount: “30”}

name: “Milk”

amount: “30”

1: “expense”

2: “expense”

3: “expense”

document.getElementById('expenseInput').addEventListener('submit', saveExpense);

function saveExpense(e) {
    let expenseName = document.getElementById('expenseNameInput').value,
        expenseAmount = document.getElementById('expenseAmountInput').value;

    let expenseStorage = {
        name: expenseName,
        amount: expenseAmount,
    }

    if (localStorage.getItem('expenses') == null) {
        let expenses = [];
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    } else {
        let expenses = JSON.parse(localStorage.getItem('expenses'));
        expenses.push('expenseStorage');
        localStorage.setItem('expenses', JSON.stringify(expenses));
    }

    document.getElementById('expenseInput').reset();
    fetchExpense();

    e.preventDefault();
}

function fetchExpense() {
    let expenses = JSON.parse(localStorage.getItem('expenses')),
        expensesList = document.getElementById('expensesList');

    expensesList.innerHTML = '';

    for (let i = 0; i < expenses.length; i++) {
        let name = expenses[i].name,
            amount = expenses[i].amount;

        expensesList.innerHTML +=   '<div class="well" id="expense-item">' +
                                    '<h3>' + name + '</h3>' +
                                    '<h3>' + amount + '</h3>' +
                                    '<a href="#" onclick="deleteExpense()" class="btn btn-danger">Delete</a>' +
                                    '</div>';
    }
}

I’m rewriting code many times but it doesnt’s work.

Comments

Comment posted by Chris

Will be nice if you put your code in the working example (see icon in toolbar)

Comment posted by Nipun Jain

Okay, Its great

By