I have function when the input-1 element changes, if the user input is valid it should fire an async function that fetches data and populates datalist for input-2.
Even tho const validInput = isValid(input1); return correct result, the async function always get executed
input1.addEventListener('change', handleChange)
function handleChange () {
const validInput = isValid(input1); // correctly returns true/false
console.log(validInput)
if(!validInput) {
hideInput(input2);
console.log('1',validInput)
}
else {
console.log('2',validInput)
updateInput2datalist(); // gets executed either way
displayInput(input2);
}
};
async function updateInput2datalist () {
let arr;
await getModelsAPI().then(response => arr = response);
populateDatalist(input2Datalist, arr);
}
from the console i get
true 2 true
false 2 false
I think you need to reverse the if condition, as updateInput2datalist function will be executed on validInput equal true value.
if(validInput) {
hideInput(input2);
}
else {
updateInput2datalist(); // gets executed either way
displayInput(input2);
}