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.