Остановление и динамическое изменение функции JS

Есть несколько функций. Вопрос: как сделать так, чтоб при нажатии кнопки в форме, к примеру функция LEVEL_ONE останавливалась и функций LEVEL_TWO вызывалась?

<script>
   $(document).ready(() => {
      const LEVEL_ONE = () => {
        ...
      };
      LEVEL_ONE();


      const LEVEL_TWO = () => {
        ...
      };
   });
</script>

<div class='bottom'>
   <form class='nextLvl' action='index.php?column=1&lvl=1' method='post'>
      <input class="nextLvlBtn" type='submit' name='nextLevel' value='Далее'>
   </form>
</div>

Ответы (1 шт):

Автор решения: letUser

Если вы будете просто вызывать функции в скрипте, то они будут выполняться поочередно по ходу загрузки скрипта.

Для распределения выполнения функций по тригерам в окружении используйте "ивенты".

let bttn = document.getElementsByClassName('nextLvlBtn');

for(let el of bttn) {
el.addEventListener("click", () => {
  console.log('1');
  //LEVEL_TWO
});
}

Таким образом LEVEL_TWO будет инициирована только по клику на submit.

→ Ссылка