Why does HTML’s select onchange cause a TypeError on its second change?

This is my first time building a website, so far its almost ready to go, but for some reason when I try to change a dropdown menu to trigger a function, it works as expected on the first time but not the second?

My html code:

<select onchange="list();" id="listSelect">
    <option disabled selected value> -- Select a list -- </option>
    <option value="list1">Item 1</option>
    <option value="list2">Item 2</option>
</select>
    
<p id="randomItem">(choose a list first)</p>
    
<iframe id="list" src="(REDACTED)"></iframe>

And my javascript code:

async function list() {
    list = document.getElementById("listSelect").value;
    if (list.length == 0) {
        alert("You need to choose a list first!");
        return;
    }
    document.getElementById('list').src="(REDACTED)" + list;
    randomItem();
}

async function randomItem() {
    list = document.getElementById("listSelect").value;
    if (list.length == 0) {
        alert("You need to choose a list first!");
        return;
    }
    const response = await fetch("(REDACTED)" + list, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer',
    });
    const json = await response.json();
    var item = json[Math.floor(Math.random()*json.length)];
    document.getElementById("randomItem").innerHTML = item;
}

Expected outcome: When the select menu’s value has changed, it will update the iframe “list” and update the p “randomItem”
Actual outcome: Expected outcome occurs on the first time the value changes, but throws

Uncaught TypeError: list is not a function
at HTMLSelectElement.onchange ((index):23:50)
onchange @ (index):23

in the console on each consecutive attempt.