CODEWITHSUNDEEP
javascripthtmlarrays
Benjamin-Michael-Newton
Benjamin-Michael-Newton

Reputation: 7

Beginner array issue - Javascript

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

Upvotes: -1

Views: 136

Answers (3)

SLePort
SLePort

Reputation: 15461

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>

Upvotes: 2

Rahul Raut
Rahul Raut

Reputation: 633

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)

})

Upvotes: 1

Roopesh Kumar Ramesh
Roopesh Kumar Ramesh

Reputation: 158

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

Upvotes: 0

Related Questions