javascript - 如何将单击的元素绑定到脚本中的所有其他函数，而不仅仅是被调用的函数？

Question

我正在制作按钮，当单击时，脚本会对用户的语音执行语音识别。有多个点击按钮，每个句子一个。按钮成对出现：单击一个按钮将启动语音识别。旁边的另一个按钮显示分数。我从 Glen Shires (Introduction to Web Speech API) 获得了基本脚本，并试图根据自己的需要对其进行调整。我已经到了让分数显示在指定按钮中的地步。但是，我想在单击的按钮旁边的按钮中显示分数。我正在尝试制作一个适用于所有按钮的 javascript 脚本。我尝试将：el.previousElementSibling.innerHTML放入该onresult部分，但它不起作用。我可以使用什么方法？这是 HTML：

  <div class="container-fluid m-1 p-2">
  <button id="score_button" type="button" class="btn mr-3 btn-info" style="height:50px; width:200px;"></button>
  <button id="start_button" onclick="startButton(this)" type="button" class="fas fa-microphone" style="color: orange; font-size:50px; text-decoration:none;"></button>
  </div>
  
  <div class="container-fluid m-1 p-2">
  <button id="score_button2" type="button" class="btn mr-3 btn-primary" style="height:50px; width:200px;"></button>
  <button id="start_button2" onclick="startButton(this)" type="button" class="fas fa-microphone" style="color: lime; font-size:50px; text-decoration:none;"></button>
  </div>
  
  <div class="container-fluid m-1 p-2 bg-warning">
  <p><strong>Here is the transcript:&nbsp;</strong></p>
  <div>
  <span id="final_span" class="final_span"></span>
  <span id="interim_span" class="interim"></span>
  </div>
  </div>

这是 JavaScript 脚本：

    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
        var x = new SpeechRecognition();
        x.continuous = true;
        x.lang = 'en-US';
        x.interimResults = true;
        x.maxAlternatives = 1;
        var ignore_onend;  
        var start_timestamp; 
        var recognizing = false; 
        var final_transcript = ''; 

        x.onstart = function(){
            recognizing = true;
             event.setAttribute("class", "fas fa-stop-circle");
        };  
    
        x.onend = function(){
            recognizing = false;
            if (ignore_onend) {
                return;
            }
            el.setAttribute("class", "fas fa-microphone");
            if (!final_transcript) {
            return;
            }
         };
        
           x.onresult = function() {
              var interim_transcript = '';
              for (var i = event.resultIndex; i < event.results.length; ++i) {
                  if (event.results[i].isFinal) {
                     final_transcript += event.results[i][0].transcript;
                  } else {
                       interim_transcript += event.results[i][0].transcript;
                    }
               }
                 final_span.innerHTML = final_transcript;
                 interim_span.innerHTML = interim_transcript;
                 document.getElementById("score_button").innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");               
                 //el.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");    
          };
         
          function startButton(el){
             if (recognizing) {
                x.stop();
                el.setAttribute("class", "fas fa-microphone");  
                return;
             } 
            final_transcript = '';
             x.start();
             ignore_onend = false;
              el.setAttribute("class", "fas fa-stop-circle");
              start_timestamp = event.timeStamp;
          };

我制作了另一个脚本。有了这个，我将整个脚本包裹在花括号中，并将其命名为“function startButton”，它也运行良好。我什至可以在右键中显示分数，例如如果单击 1 号按钮，则为 1 号得分按钮，如果单击 2 号按钮，则可以在 2 号按钮中显示得分。唯一的问题是现在即使单击停止按钮，语音识别也不会停止。停止语音识别的唯一方法是刷新页面。我可以说它仍在识别，因为脚本一直显示在下面的脚本窗口中，并且在浏览器的标题选项卡中显示了一个录制图标。这是第二个脚本。我不确定是在一个全新的问题中提出这个问题还是将其添加到当前问题中。

function startButton(el){
   
        var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
        var x = new SpeechRecognition();
        x.continuous = true;
        x.lang = 'en-US';
        x.interimResults = true;
        x.maxAlternatives = 1;
        var ignore_onend;
        let listening = false; 
        var final_transcript = ''; 
        var z = el.getAttribute("class");
        
             
              if (z ==="fas fa-stop-circle") {
                    x.stop();
                    el.setAttribute("class", "fas fa-microphone");  
                    listening = false;
                    return;
               }   else {
                       x.start();
                      final_transcript = '';
                      ignore_onend = false;
                      listening = true; 
                       el.setAttribute("class", "fas fa-stop-circle");
                       start_timestamp = event.timeStamp;
                    };

        x.onstart = function(){
            listening = true;
        };  
    
        x.onend = function(){
            listening = false;
            if (ignore_onend) {
                return;
            }
            if (!final_transcript) {
            return;
            }
         };
        
           x.onresult = function() {
              var interim_transcript = '';
              for (var i = event.resultIndex; i < event.results.length; ++i) {
                  if (event.results[i].isFinal) {
                     final_transcript += event.results[i][0].transcript;
                  } else {
                       interim_transcript += event.results[i][0].transcript;
                    }
               }
                 final_span.innerHTML = final_transcript;
                 interim_span.innerHTML = interim_transcript;            
                 el.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "what are you doing");          
          };  
};                    

标签： javascripthtmljquery

Answer 1

在最上面的脚本中，我在脚本的顶部声明了变量 , var button。然后在脚本底部的 startButton 函数中，我将该变量设置为等于被单击的元素，如下所示button = el：然后我button在脚本的各个部分使用了我以前使用过的地方el（发现它不起作用），例如el.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");. 现在这变成button.previousElementSibling.innerHTML = stringSimilarity.compareTwoStrings(final_transcript, "why");

之后，一切正常。

正如我在上面的评论中所写，Jerdine Sabio 的解决方案也有效，只要您删除一行vc_search(final_transcript);，显然是从其他地方错误插入的。请参阅我上面评论中的链接以查看 Jerdine Sabio 的解决方案。