Function's variables are defined when function is called directly, but not when called from another function?

Question

So I am learning javascript to make a script that gets timestamps and opens a report, and have some pre-set options in some HTML buttons that runs the script to open the report.

This is what the base function looks like:

function generateReport(reporttype, reportmode = 1, reportrange = 0, reportregister = 0) {
    var startdate;
    var enddate;
    var currentdate = new Date().setHours(0,0,0,0);
    var dayofweek = new Date().getDay();
    switch(reportmode) {
        case 1: // Range mode
            reportrange = reportrange * 86400000;
            startdate = currentdate - reportrange;
            enddate = currentdate + 86399999;
            break;
        case 2: // Yesterday mode
            startdate = currentdate - 86400000;
            enddate = currentdate - 1;
            break;
        case 3: // WTD mode
            startdate = dayofweek * 86400000;
            startdate = currentdate - startdate;
            enddate = currentdate + 86399999;
    }
    if (reportregister != 0) {
        reportregister = "&SR=" + reportregister;
    } else {
        reportregister = "";
    }

    let url = "http://ods02132w10:7001/odpposservlet/ODOpenReport?report="+reporttype.toString()+"&start_date="+startdate.toString()+"&end_date="+enddate.toString()+reportregister.toString()+"&precision=2";

    window.open(url);
}

This works perfectly fine, zero issues when calling the function from an HTML button.

However, I am also trying to also give the user the option to generate a report from custom parameters. I have an HTML form that is set up to pass values to a separate function that then calls the "generateReport()" function.

function advancedReport() {
    let grtype = document.getElementById("grtype").value;
    let grmode = document.querySelector('input[name="grmode"]:checked').value;
    let grrange = document.getElementById("grrange").value;
    let grregister = document.getElementById("grregister").value;
    //console.log("grtype="+grtype+"\ngrmode="+grmode+"\ngrrange="+grrange+"\ngrregister"+grregister);
    generateReport(grtype,grmode,grrange,grregister);
}

Whenever I call generateReport() through this separate function which grabs the values of the HTML form, it throws an error that says "startdate" and "enddate" are undefined. I am very confused as to why that is the case since the variables are declared and only ever used within the generateReport() function, not the advancedReport() function, and it works perfectly fine when the same parameters are passed through an HTML button rather than being called through advancedReport(). startdate and enddate should be getting defined through the switch statement.

Assigning a value to "startdate" and "enddate" outside of the switch statement results in the function working, but the switch never seems to actually process and the value remains static no matter what parameters are passed to the function.

I have tried moving the variables out of the generateReport() function to make them global in scope, but this did not result in any different behavior.

Answer 1

Use the debugging tools to find out what your function actually does. You'll find that you're passing a string ( value property of a checkbox, presumably) as parameter reportmode . Your function expects this value to be a number.