Adding a link to Idiomatic Text element

This is my html code

<a id="youtube" href="#">
<i class="fab fa-youtube-square"></i>
</a>

This is my js code

let lyrics =
[
    {
        lyric: '"lyrics goes here"',
        artist: '- artist',
        link: "https://www.youtube.com/watch?v=ox7RsX1Ee34" 
    },
]

let button = document.getElementById("button")

let lyric = document.getElementById("lyric")

let artist = document.getElementById("artist")

let link = document.getElementById("youtube")

button.addEventListener('click', () => {
    var random = Math.floor(Math.random() * lyrics.length)
    lyric.innerHTML = lyrics[random].lyric;
    artist.innerHTML = lyrics[random].artist;
    link.innerHTML= lyrics[random].link;
})

This is what it looks like currently

When I press the youtube button I want it to take me to the link.

>Solution :

If you want to send the user to the url of the youtube video, use window.open:

button.addEventListener('click', () => {
    var random = Math.floor(Math.random() * lyrics.length);
    lyric.innerHTML = lyrics[random].lyric;
    artist.innerHTML = lyrics[random].artist;

    window.open(lyrics[random].link);
}

Alternatively, you could set the href of the link and then click it to go to the page:

button.addEventListener('click', () => {
    var random = Math.floor(Math.random() * lyrics.length);
    lyric.innerHTML = lyrics[random].lyric;
    artist.innerHTML = lyrics[random].artist;

    link.href = lyrics[random].link;
    link.click();
}

and to make it open in a new tab: <a id="youtube" target="_blank">