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.
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">