0

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

2
  • Lo guardas en un archivo local asumo? Ya probaste usar el local storage si es el caso?? Para usar localStorage no es necesario importar librerias, puedes hacerlo como localStorage.setItem("Cancion1", "Me Gusta");
    – Alfa Rojo
    Commented el 18 ene. 2023 a las 23:29
  • Estuve averiguando y si es posible guardar datos con localStorage, lo que no sabria es como hacer para mostrarlo en el sitio y que quede guardado. Pero voy a seguir probando. Gracias! Commented el 19 ene. 2023 a las 3:16

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.