javascript - 调用嵌套函数 onClick 事件不识别嵌套函数

Question

在 html 页面中使用 onClick 事件调用嵌套函数时，在控制台上出现 not defined 错误。我尝试在其他帖子上寻找答案，但没有成功。我认为这是一个范围或关闭问题。但不太确定如何修复它。

我有 html 拉入外部 .js 文件并具有以下功能。 我在 checkMySelection 函数中调用主函数 mySelection1。并在 onClick 事件的主 html 上调用 mySelection1 中的嵌套函数。目标是根据他们单击的按钮更改 currentPage 变量(它最初在 .js 文件的开头声明为全局变量。)

//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 ();和 mySelection1.moduleSubMenu3();我将这些添加到我的 html 页面按钮中...因为我只希望它们在按钮 onClick 事件时被调用。

<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 索引值必须更改，具体取决于它们来自什么'card'(本文评论中的上下文)......我需要另一个具有相同功能的对象才能更改'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);   
      }
    }

这很好，但问题是我想使用相同的子菜单项，而它们在 onClick 上已经有以前的 object.function...

<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>

Answer 1

您的代码中有很多未声明的部分，因此很难对其进行调试。但是，您的语法存在一些问题，这是代码。

         //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);