Мой массив javascript не обновится, и я не могу ничего вводить во входных данных - PullRequest
Новая
       14

Мой массив javascript не обновится, и я не могу ничего вводить во входных данных

0 голосов
/ 25 мая 2019

Когда я нажимаю кнопку «Создать заметку» на моем веб-сайте диспетчера расходов, появляется страница редактирования, но она продолжает пытаться перезагрузиться, и я не могу ничего ввести ни в один из входов.

Я получаю одну ошибку: «Не удается прочитать свойство» title «undefined» и сообщение: «Регулирование навигации для предотвращения зависания браузера. Переключатель командной строки --disable-ipc-flooding-protection может использоваться для обхода защиты '

Я ожидал, что смогу создать счет и увидеть его обновленным, когда вернусь на домашнюю страницу, однако я даже ничего не могу напечатать и все равно ничего не обновится.

// JS код 

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

    if (expensesJSON !== null) {
        return JSON.parse(expensesJSON)
    } else {
        return []
    }
}
// Save expenses to localStorage
const saveExpenses = (expenses) => {
    localStorage.setItem('expenses', JSON.stringify(expenses))
}

const titleElement = document.querySelector('#expense-title')
const bodyElement = document.querySelector('#expense-body')
const removeElement = document.querySelector('#remove-note')
const expenseId = location.hash.substring(1)
const expenses = getSavedExpenses()
const expense = expenses.find(function (expense) {
    return expense.id === expenseId
})

// Get the DOM elements for an individual expense
const generateExpenseDOM = function (expense) {
    const expenseEl = document.createElement('div')
    const textEl = document.createElement('a')
    const removeButton = document.createElement('button')

// Setup the expense text
if (expense.title.length > 0) {
    textEl.textContent = expense.title
} else {
    textEl.textContent = 'Unnamed note'
}
textEl.setAttribute('href', `expense-edit.html#${expense.id}`)
expenseEl.appendChild(textEl)


// Remove expense by id
const removeExpense = function (id) {
const expenseIndex = expenses.findIndex(function (expense) {
return expense.id === id
})
if (expenseIndex > -1) {
    expenses.splice(expenseIndex, 1)
  }
}

// Setup the remove expense button
removeButton.textContent = 'x'
expenseEl.appendChild(removeButton)
removeButton.addEventListener('click', function () {
    removeExpense(expense.id)
    getSavedExpenses(expenses)
    renderExpenses(expenses, filters)
})
return expenseEl
}


if (expense === undefined) {
    location.assign('expense-edit.html')
}

titleElement.value = expense.title
bodyElement.value = expense.body

titleElement.addEventListener('input', function (e) {
    expense.title = e.target.value
    savedExpenses(expenses)
})
// add new expenses
document.querySelector('#new-expense').addEventListener('click', function (e) {
   const id = uuidv4()
      expenses.push({
         id: id,
         title: '',
         body: ''
      })
      getSavedExpenses()
     location.assign(`/expense-edit.html#${id}`)
   })

// HTML код 

   <input id="title" placeholder="Expense title">
    <textarea id="body" placeholder="Expense body"></textarea>
    <button id="remove-expenses">Remove expense</button>
<script src="expenses-functions.js"></script>
<script src="expenses-edit.js"></script>

   <input id="search-text" type="text" placeholder="Filter todos">
     <div id="expenses"></div>
    <button id="new-expense">Submit</button>
    <script src="/uuidv4.js"></script>
    <script src="/expenses-functions.js"></script>
    <script src="/expenses-app.js"></script>

1 Ответ

0 голосов
/ 25 мая 2019

Есть два места, где вы используете location.assign(), что позволяет перейти на новую страницу.

Полагаю, это срабатывает: 

if (expense === undefined) {
    location.assign('expense-edit.html')
}

expense не определено, поэтому страница перезагружается; expense не определено, поэтому страница снова перезагружается ...

Выясните, почему expense не имеет значения. (Вы также можете просто закомментировать эти строки, чтобы подтвердить, что это, по сути, проблема.)

обновление: Кроме того, я думаю, что вы предполагаете, что переменные (например, массив expenses) сохраняются при загрузке страницы. Переменные JS не сохраняются при загрузке страницы. После вызова location.assign(), все переменные JS сброшены.

Итак, эта часть кода ничего не делает: 

expenses.push({
     id: id,
     title: '',
     body: ''
  })

Я не был уверен, что происходит в getSavedExpenses(), и подумал, что, возможно, переменные были сохранены там через localstorage или что-то еще. (В противном случае это, вероятно, также мертвый код, поскольку его возвращаемое значение даже не используется.)

Существует два способа сохранения данных при «загрузке страницы»:

  1. Сохраните данные в постоянном хранилище, таком как база данных или локальное хранилище. Затем перезагрузите данные при следующей загрузке страницы. Если используется база данных, обычно данные из формы отправляются через запрос API на сервер базы данных.
  2. Не перезагружать страницу; изменить страницу DOM через JS (чтобы она выглядела как страница "перезагрузка")

обновление 2:

TypeError: Невозможно установить для свойства 'value' значение null

Эта ошибка вызвана попыткой доступа к свойству с именем value для переменной со значением null. В вашем коде это происходит в двух местах: 

titleElement.value = expense.title
bodyElement.value = expense.body

После возникновения ошибки JS прекращает выполнение. Вероятно, это причина того, что localStorage.getItem('expenses') приводит к нулю.

...