так что я учусь, практикую Javascript и DOM. Когда я запускаю это приложение для редактирования заметок, единственная проблема, которая появляется, - это функция фильтрации в отредактированном коде. Я пытался найти решение, но, похоже, все еще не работает. Может ли кто-нибудь предложить мне, как решить эту неперехваченную ошибку?
Индекс. html файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Notes App</h1>
<h2>Take notes and never forget</h2>
<input id ='search-text' type ='text' placeholder = 'Filter notes'>
<select id ='filter-by'>
<option value='byEdited'>Sort by last edited</option>
<option value='byCreated'>Sort by recently created</option>
<option value='alphabetical'>Sort alphabetically</option>
</option>
</select>
<div id='notes'></div>
<button id="create-note">Create Note</button>
<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script src='notes-function.js'></script>
<script src='notes-app.js'></script>
</body>
</html>
javascript основной файл - примечания -прил. js
const notes = getSavedNotes()
const filters = {
searchText: ''
}
renderNotes(notes, filters)
document.querySelector('#create-note').addEventListener('click', function(e) {
const id = uuidv4()
notes.push({
id: id,
title: '',
body: ''
})
savedNotes(notes)
//ocalStorage.setItem('notes', JSON.stringify(notes))
//renderNotes(notes, filters)
location.assign(`/notes-app/edit.html#${id}`)
})
document.querySelector('#search-text').addEventListener('input', function(e) {
filters.searchText = e.target.value;
renderNotes(notes, filters)
})
document.querySelector('#filter-by').addEventListener('change', function(e) {
console.log(e.target.value)
})
Рефакторинг javascript код
//Read existing notes from LocalStorage
const getSavedNotes = function() {
const notesJson = localStorage.getItem('notes')
if (notesJson !== null) {
return JSON.parse(notesJson)
} else {
return []
}
}
//Save notes to Local Storage
const savedNotes = function(notes) {
localStorage.setItem('notes', JSON.stringify(notes))
}
//remove a note from the list
const removeNote = function(id) {
const noteIndex = notes.findIndex(function(note) {
return note.id === id
})
if (noteIndex > -1) {
notes.splice(noteIndex, 1)
}
}
//Generate DOM structure for the Note
const generateNoteDOM = function(note) {
const noteEI = document.createElement('div')
const textEI = document.createElement('a')
// textEI.title = 'the link'
// textEI.href = '/notes-app/edit.html'
const button = document.createElement('button')
//Setup the remove note button
button.textContent = 'x'
noteEI.appendChild(button)
button.addEventListener('click', function() {
removeNote(note.id)
savedNotes(notes)
renderNotes(notes, filters)
})
//Setup the note title text
if (note.title.length > 0) {
textEI.textContent = note.title
} else {
textEI.textContent = 'Unamed note'
// document.querySelector('#notes').appendChild(noteEI)
}
textEI.setAttribute('href', `/notes-app/edit.html#${note.id}`)
noteEI.appendChild(textEI)
//put the element near another element
return noteEI
}
//Render application Notes
const renderNotes = function(notes, filters) {
const filterNotes = notes.filter(function(note) {
return note.title.toLowerCase().includes(filters.searchText.toLowerCase())
})
//clear element
document.querySelector('#notes').innerHTML = ''
filterNotes.forEach(function(note) {
const noteEI = generateNoteDOM(note)
document.querySelector('#notes').appendChild(noteEI)
})
}
Редактировать html файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <a href="/notes-app/index.html">My text for the link</a> -->
<input id = 'note-title' placeholder = 'Note title'>
<textarea id='note-body' placeholder="Enter note text"></textarea>
<button id ='remove-note'>Remove note</button>
<script src = 'notes-function.js'></script>
<script src ='note-edit.js'></script>
</body>
</html>
примечание-редактирование. js файл
const titleElement = document.querySelector('#note-title')
const bodyElement = document.querySelector('#note-body')
const removeElement = document.querySelector('#remove-note')
const noteId = location.hash.substring(1) //fromt first to the last
const notes = getSavedNotes()
const note = notes.find(function(note){
return note.id === noteId
})
if(note === undefined){
location.assign('/notes-app/index.html')
}
titleElement.value = note.title
bodyElement.value = note.body
bodyElement.addEventListener('input', function(e) {
note.body = e.target.value //its updated the note object
savedNotes(notes)
})
// document.querySelector('#note-body').value = note.body
titleElement.addEventListener('input', function(e){
note.title = e.target.value
savedNotes(notes)
})
//remove note
removeElement.addEventListener('click', function(e){
removeNote(note.id)
savedNotes(note)
location.assign('/notes-app/index.html')
})