Selecting a displayed NFT for use

Moralis General
#1

So I have a group of NFTs displayed using HTML and JS.

Like so

1780×746

Here is what the function looks like.

function generateNFTDisplay(id, name, description, uri) {
    const nftDisplay = `<div id="${id}" class="col-lg-4 text-center">
                            <img src=${uri} class="img-fluid rounded" style="max-width: 30%">
                            <h3>${name}</h3>
                            <p>${description}</p>
                            <button id="button_${id}" class="btn btn-dark" onclick="selectNFT(this);">Select</button>
                        </div>`
    return nftDisplay;
}

The problem is.

When I click select.

It returns.

Uncaught ReferenceError: selectNFT is not defined
    at HTMLButtonElement.onclick ((index):1)

Here is selectNFT

async function selectNFT(nftObject) {
    const nftId = nftObject.parentElement.id;
    let nft = window.nftArray.find(object => object.object_id == nftId);
    const nftDisplay = `<div id="${nft.object_id}" class="text-center">
                            <img src=${nft.image} class="img-fluid rounded" style="max-width: 40%">
                            <h3>${nft.name}</h3>
                            <p>${nft.description}</p>
                            <div id="sellActions">
                                <input id="price" type="text" class="form-control mb-2" placeholder="Price"> 
                                <button id="sellButton"class="btn btn-dark btn-lg btn-block mb-2" id="sell" onclick="offerNFT(this);">Offer for Sale</button>
                            </div>
                        </div>`
    document.getElementById("featured_nft").innerHTML = nftDisplay;
    nftOffered = await isNFTOffered(nft.token_address, nft.token_id);
    if (nftOffered) {
        document.getElementById("sellActions").remove();
    }
}
#2

you could try a different syntax here, like .onclick = function () { selectNFT(this); }, but not sure if it will help

#3

Yeah,

I tried

onclick = function () { selectNFT(this); }

Doesn’t work.

I’ve had problems in the past on this project, calling JS functions from HTML.

I thought this may be different because the HTML is put into the document via JS.

#5

I changed the HTML it make it

onclick="${selectNFT(this)}"

Rather than

onclick="selectNFT(this)"

So here is what it looks like

function generateNFTDisplay(id, name, description, uri) {
    const nftDisplay = `<div id="${id}" class="col-lg-4 text-center">
                            <img src=${uri} class="img-fluid rounded" style="max-width: 30%">
                            <h3>${name}</h3>
                            <p>${description}</p>
                            <button id="button_${id}" class="btn btn-dark" onclick="${selectNFT(this)}">Select</button>
                        </div>`
    return nftDisplay;
}

Having an issue. With

selectNFT(this)

Here is selectNFT()

async function selectNFT(nftObject) {
    console.log(nftObject);
    const nftId = nftObject.parentElement.id;
    let nft = window.nftArray.find(object => object.object_id == nftId);
    const nftDisplay = `<div id="${nft.object_id}" class="text-center">
                            <img src=${nft.image} class="img-fluid rounded" style="max-width: 40%">
                            <h3>${nft.name}</h3>
                            <p>${nft.description}</p>
                            <div id="sellActions">
                                <input id="price" type="text" class="form-control mb-2" placeholder="Price"> 
                                <button id="sellButton"class="btn btn-dark btn-lg btn-block mb-2" id="sell" onclick="offerNFT(this);">Offer for Sale</button>
                            </div>
                        </div>`
    document.getElementById("featured_nft").innerHTML = nftDisplay;
    nftOffered = await isNFTOffered(nft.token_address, nft.token_id);
    if (nftOffered) {
        document.getElementById("sellActions").remove();
    }
}

Notice how I:

console.log(nftObject);

Right at the start?

It returns undefined.

#6

what is this in that context?

#7

I realised that a large chunk of the code had to be rewritten,

It was not my own.

In this circumstance I had to create an object with all the data I needed in it then pass it to

offerNFT() because this didn’t contain anything, perhaps html?

Anyway, It looks like Daniel was half writing in python and half in JS at some points throughout this template and because of this some of it doesn’t work. I tried my best to get in into a workable state and with a bit more work I probably could, however There is a much better template in the form of the ethereum boilerplate now.