Selecting a displayed NFT for use

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

Like so

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();
    }
}

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

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.

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.

what is this in that context?