时间戳

首页 > 解决方案 > 初学者数组问题 - Javascript

javascript - 初学者数组问题 - Javascript

问题描述

我在 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)
})

标签： javascripthtmlarrays

解决方案

在过滤器方法中的 return 语句之后有一个新行，防止includes方法调用（js 解释器用 a 替换新行;）

更改您的document.querySelector('.text')with ，并在 this 中querySelector('input[type=text]')替换e.target.valuewith （这里指的是元素）。this.valuequerySelectorthisinput

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>

推荐阅读