Pass a value/variable into an async function

Question

async function getChampionID(randomChampionID) {
    let response = await fetch('http://ddragon.leagueoflegends.com/cdn/11.10.1/data/en_US/champion.json');
    let body = await response.json();
    var championData = Object.keys(body.data)
    var randomChampionKey = Math.floor(Math.random() * (154 - 0 + 1) + 0)
    return randomChampionID = championData[randomChampionKey]
}

async function getChampionName(randomChampionName) {
    let result = await getChampionID();
    let response = await fetch(`http://ddragon.leagueoflegends.com/cdn/11.10.1/data/en_US/champion/${result}.json`)
    let body = await response.json();
    return randomChampionName = body.data[result].name
}


var randomChampion = document.getElementById('random-champion')
var bgimg = document.getElementById('background-image')
var championSquare = document.getElementById('square')

randomChampion.addEventListener("click", async () =>
{
    let championID = await getChampionID()
    let championName = await getChampionName()
    bgimg.style.backgroundImage = `url('http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${championID}_0.jpg')`
    championSquare.src=`http://ddragon.leagueoflegends.com/cdn/11.11.1/img/champion/${championID}.png`
    console.log(championID)
    console.log(championName)
})

The getChampionName() function takes a random value from getChampionID , so whenever I call both of them through a button event listener, the getChampionID() generates a random ID (#1), the getChampionName() once again takes another value from getChampionID() , result in a different ID (#2), but I need the getChampionName() to take the #1 ID

Answer 1

Firstly, the functions are not being passed a parameter and therefore do not need anything within the parentheses when being defined.

Secondly, within the event listener, I would simply call a function called getChampion that gets a random ID, then gets the details, and returns both the champion detail and the ID for further use as an object.

My code would look like this.

async function getChampionID() {
    let response = await fetch('http://ddragon.leagueoflegends.com/cdn/11.10.1/data/en_US/champion.json');
    let body = await response.json();
    var championData = Object.keys(body.data)
    var randomChampionKey = Math.floor(Math.random() * (154 - 0 + 1) + 0)
    return championData[randomChampionKey]
}

async function getChampion() {
    let result = await getChampionID();
    let response = await fetch(`http://ddragon.leagueoflegends.com/cdn/11.10.1/data/en_US/champion/${result}.json`)
    let body = await response.json();
    return { name: body.data[result].name, id: result }
}


var randomChampion = document.getElementById('random-champion')
var bgimg = document.getElementById('background-image')
var championSquare = document.getElementById('square')

randomChampion.addEventListener("click", async () =>
{
    let champion = await getChampion()
    bgimg.style.backgroundImage = `url('http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champion.id}_0.jpg')`
    championSquare.src=`http://ddragon.leagueoflegends.com/cdn/11.11.1/img/champion/${champion.id}.png`
    console.log(champion.id)
    console.log(champion.name)
})