Estoy realizando un proyecto personal. Se trata de un sitio web de canciones que obtiene cierta cantidad de datos de un JSON y los va imprimiendo (informacion sobre una cancion, artista, album, etc). Hasta ahí pude hacerlo bien. Pero quise crear un botón para ir agregando esas canciones a una lista (estilo el botón de me gusta en Spotify) con un evento. Consegui hacer funcionar el boton para que agrega las canciones a una table, pero lo que no logro es que cada canción que doy me gusta se "guarde" y siempre se muestre por pantalla. Muestro una parte del código que tengo por ahora. Si alguien puede guiarme un poco lo agradezco. PD: la funcion "buttonLike" se ejecuta dentro de un evento en otra parte del codigo.
function buttonLike() {
let butonClick = document.getElementById("iconLike")
let alertSong = document.getElementById("alertSong")
let alertSongDelete = document.getElementById("alertSongDelete")
console.log("se activo")
butonClick.classList.toggle('fa-regular');
butonClick.classList.add("animate__animated","animate__rubberBand")
butonClick.classList.toggle('fa-solid');
if(butonClick.classList.contains("fa-solid")) {
alertSong.style.display = "block"
getTable()
getTable()
getTable()
}else if(butonClick.classList.contains("fa-regular")){
alertSong.style.display = "none"
alertSongDelete.style.display = "block"
}
}
function getTable() {
let songAPI = `./json/TracksExport.json`
let songFetch = fetch(songAPI)
songFetch.then(response => {
return response.json()
}).then(dataSong => {
console.log(dataSong)
for (const key in dataSong) {
let $song = document.getElementById("cancion")
if($song.value === dataSong[key].title){
let tableBody = document.createElement("tbody")
let tableBodyChild = document.createElement("th")
$tableSong.appendChild(tableBody)
tableBody.appendChild(tableBodyChild)
tableBodyChild.textContent = dataSong[key].title
}
}
})
}
localStorage.setItem("Cancion1", "Me Gusta");