How to clear previous results when a search button is clicked? (HTML and JS)-CodePudding

A webpage created to fetch data from an api with a simple search bar and search button.

This is the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <title>Search Games</title>
    <link rel="stylesheet" href="pbl.css">
</head>
<body>
    <br><h1 >Gamer's DataBase</h1>
    <br>
    <br>
    <br>
    <div>
            <input  type="search" placeholder="Search Game(s) by name..." id = "game_name">
               <button  onclick = "movie_search();event.preventDefault()"><svg width="30" height="30" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg></button>
    </div>
    <div class = "games"></div>
    <script src = "game(with css).js"></script>
</body>
</html>

This is the JavaScript:

function movie_search()
{
var game_name = document.getElementById('game_name').value;
var raw = "search \"" game_name "\"\;\r\nfields cover.url, name, url, screenshots.*; \r\n";

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games", requestOptions)
  .then(response => response.json())
  .then(data => {
    data.forEach(gayme => {
        html  = "<div class = 'gayme'>"
        let keys = Object.keys(gayme);
        keys.forEach((key) => {
        html  = gayme[key]
        })
        html  = "</div>"
        const game = `<ul><li><img src = "https:${gayme.cover.url}"><br><h4>Name:</h4><h3>${gayme.name}</h3><br><a href = "${gayme.url}">Click for Game Info</a><br><br></li></ul>`; 
        document.querySelector('.games').innerHTML  = game; 
    
    })
  })
  .catch(error => console.log('error', error));
}
document.querySelector(".search").addEventListener("keyup",function(event){
  if(event.key == "Enter") {
      movie_search ();
  }
})

When I search something for the second time, the new resutls list below the previous results. I want to add something to the code which will remove the previous results when the button is clicked and will display the new results only. Please help.

CodePudding user response：

For your quesiton,you just need to remove when assign new value to elements game

So change

 document.querySelector('.games').innerHTML  = game;

 document.querySelector('.games').innerHTML = game;

Note: according to your code,variable html seems not used

    html  = "<div class = 'gayme'>"
    let keys = Object.keys(gayme);
    keys.forEach((key) => {
    html  = gayme[key]
    })
    html  = "</div>" // this variable is not used later
    const game = `<ul><li><img src = "https:${gayme.cover.url}"><br><h4>Name:</h4><h3>${gayme.name}</h3><br><a href = "${gayme.url}">Click for Game Info</a><br><br></li></ul>`; 
    document.querySelector('.games').innerHTML  = game;

CodePudding user response：

Before you append the query results you have to clear the html of the search results:

document.querySelector('.games').innerHTML = "";