Beginner array issue - Javascript

Question

I'm having an issue with an app in JavaScript.

I seem to randomly have an issue with my array not showing up in JavaScript - I've tried remaking the program several times and sometimes it works, sometimes it doesn't. This is a sample of my latest failed attempt. Could anyone tell me exactly why the array is not appearing in the browser? I've tried to set up a filter and form. I'm trying to create a list with a filter objects in the array.

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

Welcome to stackoverflow! Remember to add in what you are trying to do in your program in the question — Sheshank S.
– Sheshank S., Commented Jul 3, 2018 at 6:10
Look at the javascript console you should be seeing an error as the event object doesn't have a elements property. Did you mean to access the elements property of the form element? — Patrick Evans
– Patrick Evans, Commented Jul 3, 2018 at 6:12
I've edited that. Thanks for the response. The filter still seems to be having some issues though. — Benjamin-Michael-Newton
– Benjamin-Michael-Newton, Commented Jul 3, 2018 at 6:20
There is no element with class text check this line document.querySelector('.text') — brk
– brk, Commented Jul 3, 2018 at 6:21

SLePort · Accepted Answer · 2018-07-03 08:36:15Z

There is a new line after your return statement in the filter method that prevents the includes method call(the js interpreter replaces the new line with a ;)

Change your document.querySelector('.text') with querySelector('input[type=text]'), and replace e.target.value with this.value in this querySelector(this refers here to the input element).

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>

Rahul Raut · Accepted Answer · 2018-07-03 07:24:02Z

This can work with e.target.value as well, you just have add class "text" on the input type. The main issue was new line after return statement. It will always return undefined and filter array will be empty. For more information please refer following link. 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)

})

Roopesh Kumar Ramesh · Accepted Answer · 2018-07-03 06:46:19Z

0

This should work.

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

edited Jul 3, 2018 at 6:46

answered Jul 3, 2018 at 6:38

Roopesh Kumar Ramesh

1581 silver badge10 bronze badges

Collectives™ on Stack Overflow

Beginner array issue - Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related