Saya terjebak dalam sedikit kebingungan bagaimana cara mengambil hasil spesifik jika saya mengetikkan nama judul di kolom input. Di bawah ini adalah kode yang telah saya coba. Saya akan menghargainya. Terima kasih

File index.html

<form method="POST">
 <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
<button  onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button>
  </form>

<ul id="list">

</ul>





JavaScript File
const list = document.getElementById('list');
const searchName = document.getElementById('searchName').value;

const userAction = async (event) => {
  event.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(todos => {
    todos.forEach((todo) => {
    if(todo===searchName){
      const li = document.createElement('li');

      li.innerHTML = li.innerHTML = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;

      list.appendChild(li);
    }
    });
  })
}
0
loveCoding 26 Oktober 2019, 13:54

1 menjawab

Jawaban Terbaik

#searchName tidak memiliki nilai pada pemuatan halaman dan Anda tidak memperbarui nilai di dalam fungsi, jadi jika kondisinya gagal.

Anda harus mengambil nilai pencarian di dalam fungsi.

const list = document.getElementById('list');
const userAction = async (event) => {
  list.innerHTML = ''; //clear the content on each click
  event.preventDefault();
  const searchName = document.getElementById('searchName').value.trim();
  fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(todos => {
    todos.forEach((todo) => {
      if(searchName == todo.title){
        const li = document.createElement('li'); 
        li.textContent = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;
        list.appendChild(li);
      }
    });
  })
}
<form method="POST">
 <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
<button  onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button>
  </form>

<ul id="list">

</ul>
0
Mamun 27 Oktober 2019, 04:45