Why doesn’t the function in JS that changes the content work?

I’ve been stuck with the problem that shouldn’t have even occured in the first place. It’s a simple code in JS that changes the content of html page, when we click on something in the list. The task is quite simple: at first, I have a list of Categories. When I click on one of Categories, I get the list of Content. And when I click on one in Content, I get the final page about it (for example Categories – countries, when I choose country, it shows me the list of music albums that was created there and when I choose an album, the page shows me the information about it). It worked perfectly when it came to the Category Page and Content Page. But when I finally choose “an album”, it doesn’t show me anything. I just stay at the list of Content Page, and the title section shows me the title of my file – “index.html”. All the information is taken from an array (it’s a task for a beginner, because I get familiar with JS).

class MusicAlbum{
    constructor(id, countryId, title, image, description)
    {
        this.id = id;
        this.countryId = countryId;
        this.title = title;
        this.image = image;
        this.description = description;
    }
}

function AlbumPage(albumId){
    const album = musicAlbums.find(({id}) => id === albumId);
    document.querySelector('title').innerHTML='';
    document.querySelector('title').innerHTML = album.title;
    document.querySelector('main').innerHTML = '';
    document.querySelector('main').innerHTML =
        `<h2>"${album.title}"</h2>
        <img src="${album.image}" alt="" width = 100%>
        <p>${album.description}</p>
        <hr>`;

}

So I have no idea what to do next, because it should have been working. Though at first it worked, but then stopped and I didn’t catch the moment when it happened.