Tengo un problema con mi trabajo de conversor de monedas y es que cuando mando a recuperar los datos del localStorage para que se muestren en el DOM al recargar la página no quedan ahi y se desaparecen, la función es la siguiente:
//Datos de inputs
const primerDivisa = document.getElementById('primer-divisa')
const segundaDivisa = document.getElementById('segunda-divisa')
const ul = document.querySelector('.lista-resultados')
function calcular() {
const primerMonedaIngresada = primerDivisa.value
const segundaMonedaIngresada = segundaDivisa.value
// Los datos que se almacenan son de una API que me da valores de distintas divisas
fetch(`https://v6.exchangerate-api.com/v6/58f679169d6ab2828a7dcda0/latest/${primerMonedaIngresada}`)
.then(res => res.json())
.then(data => {
const taza = data.conversion_rates[segundaMonedaIngresada]
infoDeCambio.innerHTML = `<b>1 ${primerMonedaIngresada}</b> es igual a: <b>${taza.toFixed(2)} ${segundaMonedaIngresada}</b>`
segundoValor.value = (primerValor.value * taza).toFixed(2)
botonConvertir.addEventListener('click', botonClick)
})
}
Esta es la funcion que muestra el código en el DOM y a la vez los almacena en localStorage. ¿Que estoy haciendo mal? :(
//MOSTRAR CONTENIDO EN EL DOM
function botonClick() {
const li = document.createElement('li')
li.classList = 'lista'
const agregarEnLista = ul
li.innerHTML = `La conversión de <b>$${primerValor.value} ${primerDivisa.value}</b> es igual a: <b>$${segundoValor.value} ${segundaDivisa.value}</b>`
agregarEnLista.appendChild(li)
li.appendChild(borrarResultados())
almacenarEnLocal.push(li.innerHTML)
almacenarEnStorage()
}
//AGREGAR CONTENIDO AL LOCALSTORAGE
function almacenarEnStorage() {
let resultados = JSON.stringify(almacenarEnLocal)
localStorage.setItem("Conversiones", resultados) // <= ARREGLO ALMACENADO EN EL LOCALSTORAGE
document.addEventListener('DOMContentLoaded', () => { //RECUPERAR DATOS DEL LOCALSTORAGE
obtenerLista.forEach( function(elementoLista) {
botonClick(elementoLista)
})
})
}