如何使用香草 javascript 中的一个切换按钮调用 2 个不同的函数

Posted 2023-02-18

【中文标题】如何使用香草 javascript 中的一个切换按钮调用 2 个不同的函数

【英文标题】：How Can I call 2 different function using one toggle button in vanilla javascript

【发布时间】：2021-12-31 07:07:53

【问题描述】：

我正在使用 annyang.js 进行语音识别，它有 2 个不同的功能，开始 annyang.start() 和停止 annyang.abort() 现在我如何制作一个可以触发这两个功能的切换按钮？

我的代码

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

JS

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

目前它刚刚开始被annyang.start() 识别， 但我希望每当我点击按钮时，识别就会被annyang.abort()停止。

【参考方案1】：

你可以检查动作是否有你可以开始的活动类，如果没有你可以停止。

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

【讨论】：

非常感谢 :)，它按我的预期工作 100%，再次感谢 :)