Trying to access df from anywhere outside its own arrow function is leading to headaches.

Basic functionality is inpFile gets a csv file, parses and modifies it. HTML input then gets filled with relevant data from csv file.

prior to adding the second event listener everything was structured linearly so worked fine.

Df and the object created by processInput needs to be called externally.

    <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>