Intentar acceder a df desde cualquier lugar fuera de su propia función de flecha genera dolores de cabeza.

La funcionalidad básica es que inpFile obtiene un archivo csv, lo analiza y lo modifica. La entrada HTML luego se llena con datos relevantes del archivo csv.

antes de agregar el segundo oyente de eventos, todo estaba estructurado linealmente, por lo que funcionó bien.

Df y el objeto creado por processInput deben llamarse externamente.

 <script src="https://cdn.jsdelivr.net/npm/danfojs@1.0.2/lib/bundle.js"></script> <script> const csvFile = inpFile.files[0]; const x = selectWO.value - 1; function processInput() { const csvFile = inpFile.files[0]; dfd.readCSV(csvFile).then((df) => { df.fillNa("<Missing Value>", inplace = true); }); }; function csvToValue(elementId, csvColumnVal) { var a = document.getElementById(elementId); a.innerHTML = df.column(csvColumnVal).values[x]; }; function csvToElement(elementId, csvColumnVal) { var a = document.getElementById(elementId); a.value = df.column(csvColumnVal).values[x]; }; function valueReturns() { // Defaults csvToValue("title", "Title"); csvToElement("wo", "Work Order"); csvToElement("state", "State"); csvToElement("access", "Site Access Info"); csvToElement("description", "Description of Works"); // Needs additional processing var str = df.column("Title").values[x]; sitename.value = str.match(/(?<=\)).+?(?=\()/); }; document.getElementById('inpFile') .addEventListener("change", async() => { processInput(); valueReturns(); }); document.getElementById('selectWO') .addEventListener("change", async() => { valueReturns(); }); </script>