I have one function in which I get data from the API and parsing it to json.
In the second function, I try to insert data into a DOM element.
Where is the problem, please, and how do we render this data correctly?
Firt function:
// GET PUBLIC IP
const getIp = async () => {
const reqIp = await fetch("https://ipinfo.io/json?token=xxx")
return reqIp.json()
}
Second function:
document.addEventListener("DOMContentLoaded", async () => {
const dataIp = await getIp()
let ipAdress = document.querySelectorAll('.ip p')
ipAdress.innerHTML = dataIp.ip
})
getIp()
DOM:
<div class="ip">
<h5>Your IP Adress:</h5>
<p></p>
</div>
The token is OK, the data is displayed correctly in the console.
Ohh, too much redbull and too little sleep.
Thank you very much guys.
As they wrote in the comments, the problem was in the selector.
document.addEventListener("DOMContentLoaded", async () => {
const dataIp = await getIp()
let ipAdress = document.querySelector('.ip p')
ipAdress.innerHTML = dataIp.ip
})
getIp()
This is how it works without problems