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
– Adriano Repetti, Commented Mar 8, 2013 at 15:54
You create a function function drawAttendanceTree( but you call redrawAttendanceTree — JoDev
– JoDev, Commented Mar 8, 2013 at 15:54
Otherwise, try to add redrawAttendanceTree definition before calls. — JoDev
– JoDev, Commented Mar 8, 2013 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
– Peter Olson, Commented Mar 8, 2013 at 15:57

Peter Olson · Accepted Answer · 2013-03-08 15:56:23Z

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.

Community · Accepted Answer · 2017-05-23 12:04:53Z

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.

Collectives™ on Stack Overflow

passed variable becomes undefined javascript

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related