How Can I call 2 different function using one toggle button in vanilla javascript

Question

I am Using annyang.js for speech-recognition which have 2 different functions, for start annyang.start() and for stop annyang.abort() Now how do i make a toggle button which will fire both of these functions?

my code

<div class="action" onclick="actionToogle()">

JS

<script>
    function actionToogle() {
      var action = document.querySelector(".action");
      action.classList.toggle("active",annyang.start());
    }
  </script>

currently its just starting the recognition by annyang.start() , but i want whenever i click the button the recognition will be stop by annyang.abort()

Answer 1

You can check if action has active class you can start or if it doesnt have you can stop.

function actionToogle() {
  var action = document.querySelector(".action");
  action.classList.toggle("active");
  
  if (action.classList.contains("active")) {
    // annyang.start();
    console.log("Started");
  } else {
    // annyang.abort();
    console.log("Stopped");
  }
}