我在使用 JavaScript 中的应用程序时遇到了问题。
我似乎随机遇到了一个问题，我的数组没有出现在 JavaScript 中 - 我已经尝试多次重新制作程序，有时它有效，有时它不起作用。这是我最近一次失败尝试的示例。谁能告诉我为什么数组没有出现在浏览器中？我尝试设置过滤器和表单。我正在尝试创建一个在数组中带有过滤器对象的列表。
<!DOCTYPE html>
<html>
<head>
<title>Work</title>
</head>
<body>
<h1>Todos</h1>
<todo class="tddiv"></todo>
<input type="text" class="todo" placeholder="type here">
<form class="todo-form">
<input type="text" placeholder="input-todo-text" name="addTodo">
<button>Submit Text</button>
</form>
<script src="script.js"></script>
</body>
</html>
JavaScript
let todos = [{
text: 'Order cat food',
completed: false
}, {
text: 'Clean kitchen',
completed: true
}, {
text: 'Buy food',
completed: true
}, {
text: 'Do work',
completed: false
}, {
text: 'Exercise',
completed: true
}]
const filters = {
searchText: ''
}
const renderTodos = function(todos, filters) {
const filter = todos.filter(function(todo) {
return
todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
})
document.querySelector('.tddiv').innerHTML = ''
filter.forEach(function(a) {
const add = document.createElement('p')
add.textContent = a.text
document.querySelector('.tddiv').appendChild(add)
})
}
renderTodos(todos, filters)
document.querySelector('.text').addEventListener('input', function(e) {
filters.searchText = e.target.value
renderTodos(todos, filters)
})
filter 方法中的 return 语句后面有一个新行，用于阻止includes方法调用(js 解释器用;替换新行(
用querySelector('input[type=text]')更改document.querySelector('.text')，并在此querySelector中将e.target.value替换为this.value(此处this指input元素(。
let todos = [{
text: 'Order cat food',
completed: false
}, {
text: 'Clean kitchen',
completed: true
}, {
text: 'Buy food',
completed: true
}, {
text: 'Do work',
completed: false
}, {
text: 'Exercise',
completed: true
}]
const filters = {
searchText: ''
}
const renderTodos = function(todos, filters) {
const filter = todos.filter(function(todo) {
return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
})
document.querySelector('.tddiv').innerHTML = ''
filter.forEach(function(a) {
const add = document.createElement('p')
add.textContent = a.text
document.querySelector('.tddiv').appendChild(add)
})
}
renderTodos(todos, filters)
document.querySelector('input[type=text]').addEventListener('input', function(e) {
filters.searchText = this.value
renderTodos(todos, filters)
})<h1>Todos</h1>
<todo class="tddiv"></todo>
<input type="text" class="todo" placeholder="type here">
<form class="todo-form">
<input type="text" placeholder="input-todo-text" name="addTodo">
<button>Submit Text</button>
</form>
<script src="script.js"></script>这也适用于 e.target.value，您只需在输入类型上添加类"text"。主要问题是返回语句后的新行。它将始终返回未定义，过滤器数组将为空。欲了解更多信息，请参阅以下链接。MDN JavaScript 语法
<!DOCTYPE html>
<html>
<head>
<title>Work</title>
</head>
<body>
<h1>Todos</h1>
<todo class="tddiv"></todo>
<input type="text" class="todo" placeholder="type here">
<form class="todo-form">
<input class="text" type="text" placeholder="input-todo-text" name="addTodo">
<button >Submit Text</button>
</form>
<script src="script.js"></script>
</body>
</html>
let todos = [{
text: 'Order cat food',
completed: false
}, {
text: 'Clean kitchen',
completed: true
}, {
text: 'Buy food',
completed: true
}, {
text: 'Do work',
completed: false
}, {
text: 'Exercise',
completed: true
}]
const filters = {
searchText: ''
}
const renderTodos = function (todos, filters) {
const filter = todos.filter(function (todo) {
return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
})
document.querySelector('.tddiv').innerHTML = ''
filter.forEach(function (a) {
const add = document.createElement('p')
add.textContent = a.text
document.querySelector('.tddiv').appendChild(add)
})
}
renderTodos(todos, filters)
document.querySelector('.text').addEventListener('input', function (e) {
filters.searchText = e.target.value
renderTodos(todos, filters)
})
这应该有效。
<input type="text" placeholder="input-todo-text" name="addTodo" class="text"/>
const renderTodos = function(todos, filters) {
const filter = todos.filter(function(todo) {
if(todo.text.toLowerCase().includes(filters.searchText.toLowerCase()) && filters.searchText!="")
{
console.log(todo);
return todo;
}
})