Everytime I get a different error ,firstly the text and the images werenot displaying but now its displaying in this weird manner
Can anybody guide me to fix these errors
NFT Explorer
<p>
Address: <input type="text" id="address" size="64" maxlength='64' /><br />
<button id="btnUpdate">Update</button>
</p>
<h3>Content</h3>
<div id="content"></div>
<script>
// connect to Moralis server
const serverUrl = "serverurl";
const appId = "appid";
Moralis.start({ serverUrl, appId });
async function getNFTs(address) {
const options = { chain: 'eth', address: address };
const nftCount = await Moralis.Web3.getNFTsCount(options);
$("#content").html("<p>Items count: " + nftCount + " </p>");
if (nftCount > 0) {
const allNFTs = await Moralis.Web3.getNFTs(options);
console.log(allNFTs);
allNFTs.forEach((nft) => {
let url=fixURL(nft.token_uri);
fetch(url)
.then(response => response.json())
.then(data => {
$("#content").html($("#content").html()
+ "<div><img width='100' align='left' src='" + fixURL(data.image) + "' />"
+ "<h2>" + data.name + "</h2>"
+ "<p>" + data.description + "</p></div><br clear='all' />");
});
});
}
}
fixURL = (url) => {
if (url.startsWith("ipfs")) {
return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://ipfs/")[1];
} else {
return url + "?format=json";
}
}
document.getElementById("btnUpdate").onclick = () => {
console.log("Update!");
let address = $("#address").val();
console.log("Update! address="+address);
if (typeof address != 'undefined') {
getNFTs(address);
}
}
</script>
</body>
it looks like url is undefined and maybe that is why it doesn’t work