let fieldName   = ""
let jsonResponse = ""
let collectionName = ""
let fieldEl     = document.getElementById("field_el")
let inputEl     = document.getElementById("input-el")
let buttonEl    = document.getElementById("button-el")

let collectionData = {
    averagePrice: ""
}
    
const getStatsAvgPrice = {
    currentAP: function() {
        collectionData.averagePrice = jsonResponse.stats["average_price"]
    }
}

function callApi(collectionName,fieldName) {
    fetch(`https://api.opensea.io/api/v1/collection/${collectionName}/${fieldName}`)
    .then(response => response.json())
    .then(response => jsonResponse = response)
    .then(getStatsAvgPrice.currentAP())
    .then(render())
    .catch(err => console.error(err));
}

function render() {
    document.getElementById("report").innerHTML = JSON.stringify(collectionData.averagePrice);
    console.log(JSON.stringify(collectionData.averagePrice))
}

buttonEl.addEventListener("click", () => {
    collectionName  = inputEl.value
    fieldName       = fieldEl.value
    callApi(collectionName,fieldName)
}) 

How can I get this to work? Perhaps make more functions? Add to the dom? Any ideas would be helpful. Still getting a double click error even though the flow is right.