Question

我正在建立一个费用经理网站，但是我不确定如何呈现费用和收入。我已经将数据保存到localStorage并生成了ID。我有一个编辑页面，用户可以在其中填写费用表格来创建费用，当他们单击“提交”时，我希望将费用明细呈现到主页上。使用JavaScript单击“提交”按钮后，如何将用户输入从编辑页面呈现到主页？

我收到错误消息：“ i”是只读的。

// What I've changed (JS)
const displayExpenses = (targetElem) => {
    let html = `<div class="amnt-expense">`;

    for (const i = 0; i < this.expenses.length; i++) {
        html += `<input type="text" id="amount" name="amount" required></div>
        <div class="text-expense"> <textarea type="text" id="description" name="description"></textarea>`
    }

    html += `</div>`
    targetElem.innerHTML = html;
    return displayExpenses(targetElem)
}
// I've put the form's id in 'expenses'
const account = {
    name: 'Rahni De-Meis',
    expenses: ['#expense-form'],
    income: [],

// Home Page (HTML)

    <div class="header"> <h1>Expense Manager</h1><p id="p-head">Keep track and stay debt free!</p></div>
   <div class="center">
      <select>
        <option value="byPrice">Least Expensive</option>
        <option value="alphabetical">Alphabetically</option>
        <option value="byEdited">Last Edited</option>
      </select>
   <p>Item1</p>
   <p>Item2</p>
   <button id="income">Add Income</button>
   <button onclick="location.href" id="add-expense">Add Expense</button>
    </div>

// Edit expense form
<form id="expense-form">
       <div class="amnt-expense"><input type="text" id="amount" name="amount" required></div>
       <div class="text-expense"> <textarea type="text" id="description" name="description"></textarea></div>

   <button onclick="location.href" id="submit-expense">Submit</button>
   <button id="remove">Remove Expense</button>
</form>

const account = {
    name: 'Rahni De-Meis',
    expenses: [],
    income: [],


    addExpense: function (description, amount) {
      this.expenses.push({
          description: description,
          amount: amount
      })
    },
getAccountSummary: function () {
        let totalExpenses = 0
        let totalIncome = 0
        let accountBalance = 0

       this.expenses.forEach(function (expense) {
           totalExpenses = totalExpenses + expense.amount
       })
account.addExpense('Rent', 850)
account.addExpense('Food Shopping', 60)
console.log(account.getAccountSummary())


// Read existing expenses from localStorage
const getSavedExpenses = () => {
    const expensesJSON = localStorage.getItem('expenses')

    try {
    return expensesJSON ? JSON.parse(expensesJSON) : []
} catch (e) {
    return []
}
}
const expenses = getSavedExpenses()

// Save expenses to localStorage
const saveExpenses = (expenses) => {
localStorage.setItem('expenses', JSON.stringify(expenses))
}
//Listen for new expense to be created
$('#add-expense').on('click', function() {
location.href = '/expense.html'
})
$('#submit-expense').on('click', function() {
saveExpenses(expenses)
location.href = '/index.html'
})
$('#add-expense').on('click', function () {
    const id = uuidv4()
    expenses.push({
        id: id,
        title: '',
        body: ''
    })
saveExpenses(expenses)
    location.href = `/expense.html#${id}`
    console.log(id)
})

Answer 1

您需要遍历您的account.expenses并使用Javascript将值填充到表单中。...如果数据保存在localStorage中，则需要将其提取并存储到帐户中。

尚不清楚您需要如何呈现它，但这也许会帮助您...您可能需要在费用对象中调整键名... targetElem参数本身就是您插入的元素数据导入。

displayExpenses: (targetElem, paramExpenses) => {
    let html = `<div>`;

    for (var i = 0; i < paramExpenses.length; i++) {
        html += `<label>Description: 
                    <textarea type="text" id="description" name="description">${paramExpenses[i].description}</textarea>
                </label>
            </div>
            <div> 
                <label>Amount: <input type="text" id="amount" name="amount" value="${paramExpenses[i].amount}" required></label>`
    }

    html += `</div>`;

    targetElem.innerHTML = html;
}

如果此解决方案没有帮助您，请更详细地说明并提供更多相关代码。

回复评论：将解析后的本地存储传递到第二个参数中……如果getSavedExpenses（）返回一个空数组，您可能应该添加一个if语句来处理逻辑。

displayExpenses(firstParam, getSavedExpenses());

如何使用JavaScript将用户输入从表单呈现到另一个页面

1 个答案: