passed variable becomes undefined javascript

Question

I have 2 function that do that same thing. One works and one doesn't.

function showHideRedrawAttendanceAvg(chart, dataType)
{
    $("#attendanceCount").addClass("hide");
    $("#attendanceAvg").removeClass("hide");
    redrawAttendance(chart, dataType);//Parameters are defined
}

function redrawAttendance(chart, dataType) //Parameters are passed and are defined
{
    //Some logic
}

//I tried change the parameter name several times to make sure it was unique
function showHideRedrawAttendanceCount(agagfadfg)
{
    $("#attendanceAvg").addClass("hide");
    $("#attendanceCount").removeClass("hide");
    redrawAttendanceTree(agagfadfg);//Parameter is defined
}

function redrawAttendanceTree(agagfadfg)//Parameter becomes undefined
{
    //Some logic
}

I have no idea why the two functions behave differently. I even removed all of my javascript from the file and just left the showHideRedrawAttendanceCount and redrawAttendanceCount functions and it still did not work.

<ul class="dropdown-menu">
    <li class="dropdown-submenu">
        <a href="#">Attendance Average</a>
        <ul class="dropdown-menu">
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceAvg(attendance, 'Weekly')">Weekly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceAvg(attendance, 'Monthly')">Monthly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceAvg(attendance, 'Quarterly')">Quarterly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceAvg(attendance, 'Yearly')">Yearly</a></li>
        </ul>
    </li>
    <li class="dropdown-submenu">
        <a href="#">Attendance Total</a>
        <ul class="dropdown-menu">
            <li><a data-toggle="tab" href="#attendance" onclick="">Weekly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceCount('Monthly')">Monthly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceCount('Quarterly')">Quarterly</a></li>
            <li><a data-toggle="tab" href="#attendance" onclick="showHideRedrawAttendanceCount('Yearly')">Yearly</a></li>
        </ul>
    </li>
</ul>

redrawAttendanceTree/drawAttendanceTree are different names, is it a typo in the example code? — Adriano Repetti, Mar 08 '13 at 15:54
You create a function `function drawAttendanceTree(` but you call `redrawAttendanceTree` — JoDev, Mar 08 '13 at 15:54
Otherwise, try to add `redrawAttendanceTree` definition **before** calls. — JoDev, Mar 08 '13 at 15:55
By the way, the jQuery methods `.hide()` and `.show()` might be easier to use than `addClass("hide")` and `removeClass("hide")`. — Peter Olson, Mar 08 '13 at 15:57
So I didn't change any code, but the parameter is no longer undefined. It wouldn't be the strangest thing I've seen today with javascript/html. — all4you61, Mar 08 '13 at 18:47

score 1 · Answer 1 · answered Mar 08 '13 at 15:56

When you call

redrawAttendanceTree(agagfadfg);

The redrawAttendanceTree function is not defined in the code sample you gave, so it will error saying that you're trying to call a function that doesn't exist.

drawAttendanceTree is never called in the code sample you gave.

score 0 · Answer 2 · edited May 23 '17 at 12:04

Function overloading in Javascript doesn't work as in other languages. In Javascript just because you have a parameter less in a function doesn't mean it has a different signature, instead it's the name that counts.

This way

function showHideRedrawAttendanceCount(agagfadfg)

will never get called.

To still achieve what you're trying, try out this thread on how to best overload functions in Javascript.

passed variable becomes undefined javascript

2 Answers2