I do not know what is the problem with my code but it is not working , here is the code :

const inputKeywords = document.getElementById(‘input-keywords’);
const submitButton = document.getElementById(‘submit’);
const musicContainer = document.querySelector(".music-container");

submitButton.addEventListener(‘click’, () => {
getSongData();
})

async function getSongData() {
const url =https://shazam.p.rapidapi.com/search?term=${inputKeywords.value}&locale=en-US&offset-0&limit=5;
const options = {
method: ‘GET’,
Headers: {
‘X-RapidAPI-Key’: ‘key’,
‘X-RapidAPI-Host’: ‘shazam.p.rapidapi.com’ ,
}
}

const response = await fetch(url, options);
const result = await response.json();

setSongDataDisplay(result);

}
function setSongDataDisplay(result) {

musicContainer.innerHTML = `

 <div class = "container music-card"> 
 <div class = "col"> 
    <div> 
        <img src =${results.tracks.hits[0].track.images.coverart} alt =""class = "song-img" id = "song-img" >
            <h4 id = "title">${results.tracks.hits[0].track.title}</h4>
            <a herf=${results.tracks.hits[0].track.url} id = "url">${results.tracks.hits[0].track.url} </a>
    </div>
    <hr>
    <div>
    <img src =${results.tracks.hits[0].track.images.background} alt =""class = "artist-img" id = "artist-img" >
        <p id="artist-text">${results.tracks.hits[0].track.subtitle}</p>
    </div>
    </div>
    </div>

    `;

    }