How to access a variable outside of a function in Javascript
Here is the code I am working with:
$(document).ready(function () {
var TemplateEditor = function () {
var GroupClassName = 'group';
var SelectedGroup = 0;
var BindClicks = function () {
$('.CriteriaSelections').unbind('click').click(function (event) {
event.preventDefault();
if (fnIsTheClickedBoxaGroup($(this))) {
TemplateEditor.GroupClicked();
}
else {
TemplateEditor.CriteriaClicked($(this), SelectedGroup);
}
});
$('.groupselected').unbind('click').click(function (event) {
event.preventDefault();
SelectedGroup = $(this).attr('group-'.length);
TemplateEditor.SelectGroup(SelectedGroup);
});
}
var fnGetGroupID = function (Obj) {
if (fnIsTheClickedBoxaGroup(Obj) == true) {
return null;
}
else {
//Get parent which is the group
var ObjParent = Obj.parent();
var GID = ObjParent.attr('id').substr('group-'.length);
return GID;
}
}
var fnIsTheClickedBoxaGroup = function (Obj) {
var GetClass = Obj.attr('class');
if (GetClass == GroupClassName) {
return true;
}
else {
return false;
}
}
return {
Init: function () {
BindClicks();
},
CriteriaClicked: function (Obj, GroupID) {
$('<div>').attr({ id: '' }).addClass('selection').text(Obj).appendTo('#group-' + GroupID);
},
GroupClicked: function () {
},
SelectGroupClicked: function () {
},
UpdateTargetPanel: function () {
}
};
} ();
TemplateEditor.Init();
});
I am trying to access this variable: GroupClassName
This variable is inside this function
var fnIsTheClickedBoxaGroup = function (Obj) {
var GetClass = Obj.attr('class');
if (GetClass == GroupClassName) {
return true;
}
else {
return false;
}
}
When I run the program, it says GroupClassName is undefined. Did I miss something?
+2
a source to share
5 answers
$(document).ready(function () {
var TemplateEditor = (function () {
var __self = this;
__self.groupClassName = 'group',
__self.selectedGroup = 0;
__self.BindClicks = function () {
$('.CriteriaSelections').unbind('click').click(function (event) {
event.preventDefault();
if (__self.fnIsTheClickedBoxaGroup($(this))) {
TemplateEditor.GroupClicked();
}
else {
TemplateEditor.CriteriaClicked($(this), __self.selectedGroup);
}
});
$('.groupselected').unbind('click').click(function (event) {
event.preventDefault();
__self.selectedGroup = $(this).attr('group-'.length);
TemplateEditor.SelectGroup(__self.selectedGroup);
});
}
__self.fnGetGroupID = function (Obj) {
if (__self.fnIsTheClickedBoxaGroup(Obj) == true) {
return null;
}
else {
//Get parent which is the group
var ObjParent = Obj.parent();
var GID = ObjParent.attr('id').substr('group-'.length);
return GID;
}
}
__self.fnIsTheClickedBoxaGroup = function (Obj) {
var GetClass = Obj.attr('class');
if (GetClass == __self.groupClassName) {
return true;
}
else {
return false;
}
}
return {
Init: function () {
__self.BindClicks();
},
CriteriaClicked: function (Obj, GroupID) {
$('<div>').attr({ id: '' }).addClass('selection').text(Obj);
// text return text, don't jQuery object
$('<div>').appendTo('#group-' + GroupID);
},
GroupClicked: function () {
},
SelectGroupClicked: function () {
},
UpdateTargetPanel: function () {
}
};
}).call({});
TemplateEditor.Init();
});
+2
a source to share
The code you posted is working correctly. Try it here and see.
The only change I made for the test is after calling fnIsTheClickedBoxaGroup
:
if (fnIsTheClickedBoxaGroup($(this))) {
alert('fnIsTheClickedBoxaGroup returned true');
//TemplateEditor.GroupClicked();
}
else {
alert('fnIsTheClickedBoxaGroup returned false');
//TemplateEditor.CriteriaClicked($(this), SelectedGroup);
}
You are getting an error for not showing here. Perhaps you are using GroupClassName
an extra location?
+3
a source to share