Ncaught ReferenceError: getLyrics is not defined at HTMLButtonElement.onclick (index.html:1) onclick @ index.html:1

having problem when i click get lyrics button and i dont get it why i am having this problem. I just want to search song name and after that it will show me song name and button of get lyrics. but when i click on get lyrics it shows a result in console “ncaught ReferenceError: getLyrics is not defined
at HTMLButtonElement.onclick (index.html:1)
onclick @ index.html:1”

here is the code:

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 getLyric (artist, title) {
    fetch(`${api}//v1/${artist}/${title}`)
    .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>`;
    });
}


// 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= '';
    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}','${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);
    }
    
});
        <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">

          

   </main>

There are a couple of errors.

  • The name of the function is getLyrics not getLyric, so it’s undefined.

  • Also, there is an extra /, on the url, right?

  • The remaining error, I believe, is that artist is an object. So there might be some other prop you need to add. Let’s say artist.name, or smth similar.

You will sort out.

I resolved the errors you said but i this error in the console " javascrpt.js:13 GET https://api.lyrics.ovh/v1/[object%20Object]/Hello 404 (Not Found)

getLyric @ javascrpt.js:13
onclick @ index.html:1

On standard firefox, the error is really not informative. But if you’re in a better browser -or maybe ff develeper- you could console.log(artist)

The remaining solution is to look up in the api’s doc.

I did console.log (‘artist’) and i get “javascrpt.js:13 GET https://api.lyrics.ovh/v1/[object%20Object]/Hello 404 (Not Found)
getLyric @ javascrpt.js:13
onclick @ index.html:1
javascrpt.js:20 artist” I am using chrome browser

Add artist.name on the function call.

I’ll write the code below. Like so:

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

console.log(artist, title, url)
    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>`;
    });
}
// 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= '';
    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);
    }
    
});
  • I’ve console logged the URL so you can paste it on the browser, and you’ll see the lyrics. Try using ‘Nothing Else Matters’ for example.
  • It won’t display yet if you don’t add a couple of things. But this is your job :slight_smile:

thank you I will try my best