Question

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

Answer 1

filter语句中return语句后的新行阻止了includes方法的调用（js解释器用;替换了新行）

在document.querySelector('.text')中将querySelector('input[type=text]')更改为e.target.value，并将this.value替换为querySelector（this在此指{{1 }}元素。

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

Answer 2

这也可以与e.target.value一起使用，只需在输入类型上添加类“文本”即可。主要问题是return语句后的新行。它将始终返回未定义，并且过滤器数组为空。有关更多信息，请参考以下链接。 MDN JavaScript Grammar

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

})

Answer 3

这应该有效。

<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>

初学者数组问题-Javascript

3 个答案: