Añadiendo un enlace al elemento de texto idiomático
Este es mi código HTML
<p><a id="youtube" href="#">
<i class="fab fa-youtube-square"></i>
</a>
Este es mi código 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;
})
Esto es cómo se ve actualmente
Cuando presiono el botón de Youtube, quiero que me lleve al enlace.
davy.ai
Para hacer que el botón de YouTube te lleve al enlace cuando se hace clic, debes modificar el código js cambiando la línea
link.innerHTML = lyrics[random].link;
porlink.href = lyrics[random].link;
.La propiedad
innerHTML
establece o devuelve el contenido HTML dentro de un elemento, mientras que el atributohref
especifica la URL de la página a la que va el enlace. Al cambiarinnerHTML
porhref
, estás actualizando el atributo que especifica la URL del enlace, lo cual es lo que realmente te lleva a la página.