how to clear search result while click in search button

Question

I made a song and a lyric searching page. The first time search is working well but while I click in the search button the previous result remains and also search results also shown on the page.

Now I want to disappear the result while searching for another song or lyric. And also I want to make the search the result same style but I don't get results as I wanted.

 const text = document.getElementById('text'); const search = document.getElementById('search'); const result = document.getElementById('result'); // api url const api= 'https://api.lyrics.ovh'; // song lyrics function getLyrics (artist, title) { let url = `${api}/v1/${artist}/${title}` fetch(url).then(res => res.json()).then(singerLyrics => { const lyrics = singerLyrics.lyrics; const getLyric = document.getElementById('getLyric'); getLyric.innerHTML = `<h2 class="text-success mb-4">${artist} - ${title}</h2> <pre class="lyric text-white">${lyrics}</pre>`; }); result.innerHTML= ''; } // search by song or artist function searchSongs(term){ fetch(`${api}/suggest/${term}`).then(res => res.json()).then (showData); }; // search result function showData (data) { result.innerHTML = `<div class="single-result row align-items-center my-3 p-3"> <div class="col-md-9"> ${data.data.map(song => `<h3 class="lyrics-name">${song.title}</h3> <p class="author lead">${song.type} by <span>${song.artist.name}</span></p> </div> <div class="col-md-3 text-md-right text-center"> <button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button> </div> </div>`)}; `; }; //event listeners search.addEventListener('click', function searchResult (){ const inputText = text.value.trim(); if (;inputText){ alert('this is not a song or artist') }else { searchSongs(inputText); } });

 body{ background-color: #13141b; color: #ffffff; background-image: url(images/bg-image.png); background-repeat: no-repeat; background-size: 100%; background-position: top; }.form-control{ background-color:rgba(255, 255, 255, 0.2); padding: 22px; border: none; border-radius: 25px; }.btn{ border-radius: 1.5rem; padding: 9px 20px; }.btn-privious{ background: rgba(255, 255, 255, 0.2); color: #ffffff; }.navbar-toggler { border: none; }.search-box{ position: relative; }.search-btn { position: absolute; top: 0; right: 0; height: 100%; }.single-result{ background: rgba(255, 255, 255, 0.2); border-radius: 15px; }

 <,doctype html> <html lang="en"> <head> <title>Hard Rock Solution - Song Lyric App</title> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1: shrink-to-fit=no"> <.-- Favicon --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min,css"> <.-- Custom css --> <link rel="stylesheet" href="style,css"> </head> <body> <div class="container"> <nav class="navbar navbar-dark my-3"> <a class="navbar-brand" href="#"> <img src="images/logo:png" alt="Hard Rock Solution"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"> <img src="images/toggler-icon.svg" alt=""> </button> <div class="collapse navbar-collapse" id="collapsibleNavId"> <ul class="navbar-nav ml-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdownId"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> </div> </li> </ul> </div> </nav> <main class="content-area"> <div class="search-bar col-md-6 mx-auto"> <h1 class="text-center">Lyrics Search</h1> <div class="search-box my-5"> <input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <button id="search" class="btn btn-success search-btn">Search</button> </div> </div> <.-- === Simple results === --> <div class="d-flex justify-content-center"> <div id="result" class=""> </div> <.-- Single Lyrics --> <div id="getLyric" id="artistTitle" class="single-lyrics text-center"> </div> </div> </main> </div> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js: then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Custom Script Here --> <script src ="javascrpt.js"> </script> </body> </html>

Answer 1

try to use autocomplete="off" like

    <input type="text" name="foo" autocomplete="off" />

Answer 2

Every time, search is clicked, the lyrics container should be emtpied:

document.querySelector("#getLyric").childNodes.forEach(el => el.remove())

to fix the issue, add this to your script:

document.querySelector("#search").addEventListener('click', function () {
    document.querySelector("#getLyric").innerHTML = '';
})

how to clear search result while click in search button

Question

2 answers

solution1
0 2020-08-17 17:46:36

solution2
0 2020-08-17 17:52:44

how to clear search result while click in search button

Question

2 answers

solution1 0 2020-08-17 17:46:36

solution2 0 2020-08-17 17:52:44

solution1
0 2020-08-17 17:46:36

solution2
0 2020-08-17 17:52:44