Javascript 未捕获类型错误：notes.filter不是函数_Javascript_Html_Web_Dom_Frontend

Javascript 未捕获类型错误：notes.filter不是函数

javascript html web dom

Javascript 未捕获类型错误：notes.filter不是函数,javascript,html,web,dom,frontend,Javascript,Html,Web,Dom,Frontend,所以我在学习、练习Javascript和DOM。当我运行这个note editor应用程序时，出现的唯一问题是重构代码中的过滤器函数。我试图找到解决办法，但似乎仍然不起作用。有谁能建议我如何解决这类未可知的错误吗 Index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&

所以我在学习、练习Javascript和DOM。当我运行这个note editor应用程序时，出现的唯一问题是重构代码中的过滤器函数。我试图找到解决办法，但似乎仍然不起作用。有谁能建议我如何解决这类未可知的错误吗

Index.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>

//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)
  })
}

<!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>

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')
})

重构的javascript代码

<!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>

//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)
  })
}

<!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>

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')
})

编辑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>

//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)
  })
}

<!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>

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')
})

在重构的JS代码中的任何地方都没有定义notes。我在

renderNotes（notes，filters）

中看到它被直接访问，请在将它传递给renderNotes之前定义notes。

检查notes是否是一个object是一个数组object我认为notes是主js文件中的变量，并保存在note数组所在的回调函数getSavedNote（）中。