Вызов вложенной функции Событие onClick не распознает вложенные функции

Question

Получение not defined ошибки на консоли при вызове вложенных функций с событием onClick на html-странице.Я пытался найти ответ в других сообщениях, но не смог.Я думаю, что это вопрос объема или закрытия.Но не совсем уверен, как это исправить.

У меня есть html, извлекающий внешний файл .js, и у меня есть следующие функции ниже.Я вызываю основную функцию mySelection1 в функции checkMySelection.И вызовите вложенные функции в пределах mySelection1 основного html-события onClick.Цель состоит в том, чтобы изменить переменную 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 многоразовым?Значение индекса var «currentPage» должно меняться в зависимости от того, с какой «карты» они пришли (контекст в комментариях к этой записи) ... Мне нужен другой объект с такими же функциями, чтобы можно было изменить «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);   
      }
    }

Это нормально, но проблема в том, что я хочу использовать те же самые пункты подменю, и у них уже есть предыдущая функция object.function на 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>

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