在HTML页面中使用onClick
事件调用嵌套功能时,请在控制台上获得not defined
错误。我尝试在其他帖子上搜索答案,但无法。我认为这是一个范围或封闭问题。但不太确定如何修复它。
我有HTML在外部.js文件中拉动,并在下面具有以下功能。我在checkMySelection
功能中调用主函数mySelection1
。并在onClick
事件上的主HTML上调用mySelection1
中的嵌套功能。目的是根据单击哪个按钮更改currentPage
变量(最初被声明为.js文件开头的全局VAR。)
//first function
function mySelection1() {
alert("in mySelection1 function");
var SubMenu1 = function() {
currentPage = 1;
alert("current XML node is " + currentPage);
};
var SubMenu2 = function() {
currentPage = 2;
alert("current XML node is " + currentPage);
};
var SubMenu3 = function() {
currentPage = 3;
alert("current XML node is " + currentPage);
};
}
//second function
function checkMySelection() {
SearchString = window.location.search.substring(1);
VariableArray = SearchString.split('=');
mySelection = VariableArray[1];
console.log(mySelection);
switch (mySelection) {
case '1':
alert("Case 1");
mySelection1();
break;
case '2':
//alert("Case 2");
//mySelection2();
break;
default:
alert("Something went wrong...");
}
}
<! -- CODE IN HTML BELOW -->
<button id="defaultItem" class="menuItem active" onclick="openItem(event, 'item1'); SubMenu1()">Item 1</button>
<button class="menuItem" onclick="openItem(event, 'item2'); SubMenu2()">Item 2</button>
<button class="menuItem" onclick="openItem(event, 'item3'); SubMenu3()">Item 3</button>
看起来嵌套功能被完全忽略了...:/我缺少什么?有更好的方法吗?
****在下面更新****大家好,查看求解原始帖子的现代模式...我从以下内容开始,而不是函数方法中的嵌套函数...
//Using Object Literal Notation
var mySelection1 = {
mySubMenu1: function() {
currentPage = 1;
alert("current XML node is " + currentPage);
},
mySubMenu2: function() {
currentPage = 2;
alert("current XML node is " + currentPage);
},
mySubMenu3: function() {
currentPage = 3;
alert("current XML node is " + currentPage);
}
}
我知道要调用我必须使用mySelection1.modulesubmenu1()的功能;mySelection1.modulesubmenu2();and mySelection1.modulesubmenu3();我将它们添加到我的HTML页面按钮中...因为我只想在按钮上打电话给按钮。
<button id="defaultItem" class="menuItem active" onclick="openItem(event, 'video'); mySelection1.moduleSubMenu1()">Video</button>
<button class="menuItem" onclick="openItem(event, 'resources'); mySelection1.moduleSubMenu2()">Resources</button>
<button class="menuItem" onclick="openItem(event, 'quick-check'); mySelection1.moduleSubMenu3()">Quick Check</button>
如果我只是使用这个对象,这很好地奏效了...但是,它使我进入了我要完成的问题(为什么我尝试使用嵌套功能)var对象可重复使用?" CurrentPage" var索引值必须根据它们来自的"卡"(本文的评论中的上下文)进行更改...我需要具有另一个具有相同功能的对象才能更改" CurrentPage"。..即。
//Second object needed
var mySelection2 = {
mySubMenu1: function() {
currentPage = 6;
alert("current XML node is " + currentPage);
},
mySubMenu2: function() {
currentPage = 7;
alert("current XML node is " + currentPage);
},
mySubMenu3: function() {
currentPage = 8;
alert("current XML node is " + currentPage);
}
}
这很好,但是问题是我想使用相同的子菜单项,并且它们已经具有先前的对象。
<button id="defaultItem" class="menuItem active" onclick="openItem(event, 'video'); mySelection1.moduleSubMenu1()">Video</button>
<button class="menuItem" onclick="openItem(event, 'resources'); mySelection1.moduleSubMenu2()">Resources</button>
<button class="menuItem" onclick="openItem(event, 'quick-check'); mySelection1.moduleSubMenu3()">Quick Check</button>
您的代码中没有声明很多,因此要调试它有点困难。但是,您的语法有一些问题,这是代码。
//first function
function mySelection1() {
alert("in mySelection1 function");
function SubMenu1() {
currentPage = 1;
alert("current XML node is " + currentPage);
}
function SubMenu2() {
currentPage = 2;
alert("current XML node is " + currentPage);
}
function SubMenu3() {
currentPage = 3;
alert("current XML node is " + currentPage);
}
}
//second function
function checkMySelection() {
SearchString = window.location.search.substring(1);
VariableArray = SearchString.split('=');
mySelection = VariableArray[1];
console.log(mySelection);
switch (mySelection) {
case '1':
alert("Case 1");
mySelection1();
break;
case '2':
//alert("Case 2");
//mySelection2();
break;
default:
alert("Something went wrong...");
}
}
var button1 = document.getElementById("defaultItem");
button1.addEventListener("click", SubMenu1);