Как отобразить пользовательский ввод из формы на другую страницу, используя JavaScript [на удержании]

Я создаю веб-сайт менеджера расходов, однако я не уверен, как отобразить расходы и доходы. Я уже сохранил данные в localStorage и сгенерировал идентификаторы. У меня есть страница редактирования, где пользователь заполняет форму расходов для создания расходов, и когда они нажимают кнопку «Отправить», я хочу, чтобы данные расходов отображались на главной странице. Как отобразить пользовательский ввод со страницы редактирования на домашнюю страницу, когда кнопка отправки нажата с использованием 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)
})

1
задан RJDdev 29 June 2019 в 12:13
поделиться

1 ответ

Необходимо циклично выполниться по accounts.expenses и использовать JavaScript для заполнения формы со значениями...., если данные сохраняются в localStorage тогда, необходимо вытянуть его и сохранить его в учетные записи.

не совсем ясно, как Вам нужен в представленный, но возможно это поможет Вам... необходимо будет, вероятно, настроить ключевые имена в объекте расхода... также targetElem param был бы самим элементом вставка данных в.

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 () возвращает пустой массив.

displayExpenses(firstParam, getSavedExpenses());
0
ответ дан Michael Paccione 3 July 2019 в 04:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: