向惯用文本元素添加 link

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

This is what it looks like currently

当我按下 youtube 按钮时，我希望它将我带到 link。

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

或者，您可以设置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">

向惯用文本元素添加 link

Adding a link to Idiomatic Text element

javascript

hyperlink