Ошибка создания DOM из-за нескольких файлов HTML - PullRequest
Новая
       57

Ошибка создания DOM из-за нескольких файлов HTML

0 голосов
/ 29 мая 2020

Я пытаюсь создать простое приложение-рецепт с javascript. У меня есть 3 HTML файлов: index. html, создать. html, отредактировать. html и 2 JS файлов.

У меня есть пара элементов DOM. Один в индексе. html, два при редактировании, два при создании. Теперь, когда я открываю index. html, я получаю сообщение об ошибке: 

recipe.js:14 Uncaught TypeError: Cannot set property 'value' of null

Проблема в том, что код ошибки связан с редактированием. html not index. html. Та же проблема при редактировании. html

Uncaught TypeError: Cannot read property 'appendChild' of null
at recipe.js:55

рецепт. js код 55 касается индекса. html, а не редактирования. html.

Есть ли способ нацелите файл HTML при использовании DOM. 

document.getElementById("edit-body").value = getRecipeBody();

Я хочу, чтобы приведенный выше код был только для редактирования. html, а не для индекса. html или создания. html.

edit-body - это форма, которая предназначена только для редактирования. html, а не для index или create. html

document.getElementById('recipes').appendChild(recipeEl)

Я хочу, чтобы этот код был для индекса. html не для других файлов HTML, потому что в этих файлах нет идентификатора #recipes. # Рецепты есть только в индексе. html

Я использую localStorage.

1 Ответ

0 голосов
/ 29 мая 2020

window.location.pathname позволит вам выполнить код для указанного c пути. 

if(window.location.pathname === '/edit.html') {
  document.getElementById("edit-body").value = getRecipeBody();
}

Обратите внимание, что если вы загрузите index.html по умолчанию (например, http://localhost: 80 / вместо http://localhost: 80 / index. html), тогда имя пути будет просто /, поэтому убедитесь, что вы обрабатываете оба из них, например: 

if(window.location.pathname === '/index.html' || window.location.pathname === '/') {
  document.getElementById('recipes').appendChild(recipeEl)
}

Лучшим подходом было бы защитное кодирование. Убедитесь, что полученный вами элемент существует, прежде чем запускать для него функцию. Например: 

var editEl = document.getElementById("edit-body");
if (editEl) {
  editEl.value = getRecipeBody();
}

Вместо любого из них вы также можете просто загрузить index.js на index.html, edit.js на edit.html, и т.д. c., Хотя вы бы хотели для разделения любых общих функций в отдельный (общий) файл JS.

...