So I am learning and practising Javascript. The code below actually works it renders the list of TODOs when you write in filter Todos. The problem is that I cannot understand this Uncaught TypeError: Cannot read property 'toLowerCase' of undefined when I use LowerCase and includes method.
The HTML file
<!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>Todos</h1>
<input type="text" placeholder="Enter something to do" id="new-todo-text">
<button id='add-todo'>Add Todo</button>
<input type="text" id="search-text" placeholder ='Filter todos'>
<div id='todos'></div>
<script src ='todo-experiment.js'></script>
</body>
</html>
The Javascript file
const todos = [{},{
activity: 'order',
completed: true
},{
activity: 'clean',
completed: false
}, {
activity: 'Buy',
completed: true
}, {
activity: 'Do',
completed: false
}, {
activity: 'Excercise',
completed: true
}]
const filters = {
searchtext: ''
}
const renderTodos = function(todos, filters){
const filteredTodos = todos.filter(function (todo){
return todo.title.toLowerCase().includes(filters.searchtext.toLowerCase())
})
const incompleteTodos = todos.filter(function(todo){
return !todo.completed
})
document.querySelector('#todo').innerHTML = ''
const p = document.querySelector('h2')
summary.textContent = `You have ${incompleteTodos.length} todos left`
document.querySelector('body').appendChild(p)
todos.forEach(function (todo){
const p =document.createElement('p')
p.textContent = todo.text
document.querySelector('body').appendChild(p)
})
}
renderTodos(todos, filters)
document.querySelector('#add-todo').addEventListener('click', function(e){
console.log('Add a new todo ...')
})
document.querySelector('#add-todo').addEventListener('input', function(e){
console.log(e.target.value)
})
document.querySelector('#search-text').addEventListener('input', function(e){
filters.searchtext = e.target.value
renderTodos(todos, filters)
})
Aucun commentaire:
Enregistrer un commentaire