Estoy tratando de obtener datos al hacer clic en el botón. El problema es que cuando hago clic en el botón, los datos por primera vez no se obtienen. pero cuando hago clic en la segunda vez, los datos se obtienen correctamente.
aquí está mi código
const learnMores = document.querySelectorAll('.learnMoreId'); const readmoreImg = document.querySelector('#readmoreImg'); const readMoreTitle = document.querySelector('#readMoreTitle'); const readMoresubTitle = document.querySelector('#readMoresubTitle'); const readmoreBody = document.querySelector('#readmoreBody'); learnMores.forEach((learnMore) => { learnMore.addEventListener('click', (e) => { e.preventDefault(); if (e.currentTarget) { const { reamoreid } = e.target.dataset; axios.get(`/single-readmore/${reamoreid}`).then((response) => { readmoreImg.src = `/upload/readmore/${response.data.readMoreImage}`; readMoreTitle.innerText = response.data.title; readMoresubTitle.innerText = response.data.subTitle; readmoreBody.innerHTML = response.data.desciption; }).catch((error)=>{ console.log(error); }) } }); });intente usar async/await . Además, ¿por qué estás usando e.preventDefault() ?
learnMore.addEventListener('click', async (e) => { e.preventDefault(); if (e.currentTarget) { const { readmoreid } = e.target.dataset; await axios.get(`/single-readmore/${readmoreid}`).then((response) => { readmoreImg.src = `/upload/readmore/${response.data.readMoreImage}`; readMoreTitle.innerText = response.data.title; readMoresubTitle.innerText = response.data.subTitle; readmoreBody.innerHTML = response.data.desciption; }).catch((error) => { console.log(error); }) } });No veo ningún error en su código, pero asegúrese de que "e.target.dataset" tenga valores y que la API no devuelva ningún error.