添加指向惯用文本元素的链接

Posted 2023-03-25

【中文标题】添加指向惯用文本元素的链接

【英文标题】：Adding a link to Idiomatic Text element

【发布时间】：2022-01-16 09:05:33

【问题描述】：

这是我的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 按钮时，我希望它带我到链接。

【参考方案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">