Loop doesn’t work when exported with ParcelJS

I am using ParcelJS V2. I have the following code that gets data from an HTML table. Every <td> in the cell consists of an <input> tag and the getElementById refers to the ID of the input tag.

getCount.js

let rowCount = document.getElementById("left-col__table").rows.length;

let dataExport = []
let tuple = []

let i

function collectData() {

    for (i = 0; i < rowCount - 2; i++) {
        
        console.log("RowCount: " + rowCount)
        
        tuple.push(document.getElementById("x-in-" + i.toString()).value)
        tuple.push(document.getElementById("y-in-" + i.toString()).value)

        console.log(tuple);

        dataExport.push(tuple)

        tuple = []
    }

    console.log("DataExport:" + dataExport.toString())
}

export default collectData

script.js

import collectData from '....'

collectData()

When I check my console, there isn’t log from the collectData function.

This FOR loop works fine when I use it in my script.js but doesn’t work when I export and then import into script.js.

Are there any ways to export loops using ParcelJS?

Answer

Move

let rowCount = document.getElementById("left-col__table").rows.length;

inside your function collectData() {.

At the time of bundling the DOM is unavailable, rendering your rowCount undefined.

When your function is being executed, your loop end condition checks

0 < undefined - 2

undefined - 2 results in NaN.

0 < NaN

is false, so your loop never runs.