向Idiomatic Text元素添加链接

Question

这是我的html代码

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

这是我的js代码

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;
})

这就是目前的样子

当我按下youtube按钮时，我希望它能把我带到链接。

Answer 1

如果您想将用户发送到youtube视频的url，请使用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);
}

---

或者，您可以设置链接的href，然后单击它转到页面：

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();
}

并在新选项卡中打开：<a id="youtube" target="_blank">