单页应用程序：未捕获ReferenceError：myFunction未定义

我有一个简单的代码，这是一个单页面应用程序。我有几个HTML标题，每个分配给不同的类名称。我试图根据websocket收到的信号显示/隐藏它们。此外，我已将onclick事件绑定到其中一些标头。但是，一旦我点击标题，就会抛出一个错误，说明该函数没有被定义。谁能告诉我我在这里做错了什么。单页应用程序：未捕获ReferenceError：myFunction未定义

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>MultiTask Performance Testing</title> 

    <style type="text/css"> 
     .loading { 
      display: none; 
     } 
     .overview { 
      display: none; 
     } 
     .charge { 
      display: none; 
     } 
     .discharge { 
      display: none; 
     } 
     .active { 
      display: block; 
     } 

    </style> 

</head> 
<body> 
    <!-- LOADING SCREEN --> 
    <h1 class="loading active">Loading....</h1> 

    <!-- OVERVIEW SCREEN --> 
    <br /> 
    <a id="screen1-charge" class="overview" onclick="myFunction()" href="#">enter loading mode</a> 
    <br /> 
    <a id="screen1-discharge" class="overview" onclick="dischargeFunction()" href="#">enter discharge mode</a> 

    <!-- CHARGE SCREEN --> 
    <h1 class="charge">CHARGE</h1> 

    <!-- DISCHARGE SCREEN --> 
    <h1 class="discharge">DISCHARGE</h1> 

</body> 

<script src="vendor/jquery-1.10.1.min.js"></script> 
<script src="socketHandler.js"></script> 
<script> 
    document.onreadystatechange = function() { 
     if (document.readyState === 'complete') { 
      console.log("*** READY ***"); 
      var socketController = new ReconnectingWebSocket("ws://localhost:1337"); 

      function myFunction() { 

       console.log("###############INSIDE myFunction###########"); 
       //socketController.sendMessage(JSON.stringify(["sig-request-enter-charge"])); 
      } 

      function dischargeFunction() 
      { 
       socketController.sendMessage(JSON.stringify(["sig-request-enter-discharge"])); 
      } 

     } 
    }; 
</script> 

</html>

SocketHandler.js文件的一部分

function ReconnectingWebSocket(url, protocols) { 
... 
this.onmessage = function(event) { 
     var data = event.data; 

     try{ 
      // If the string is UTF-8, this will work and not throw an error. 
      data= decodeURIComponent(escape(data)); 
     }catch(e){ } 

     var msg = $.parseJSON(data); 
     console.log("*** *** *** Message received :" + msg[0]); 

     if (msg[0] == "error") { 
      console.error(msg[1]); 
     } 
     else if(msg[0] == "sig-app-state-changed") 
     { 
      console.log("*****inside else if statement"); 
      var elements = document.getElementsByClassName('overview'); 
      for (var i in elements) { 
       if (elements.hasOwnProperty(i)) { 
        elements[i].className = 'overview active'; 

       } 
      } 

      var elementy = document.getElementsByClassName('loading active'); 
      for(var i in elementy){ 
       if(elementy.hasOwnProperty(i)){ 
        elementy[i].className = 'loading'; 
       } 
      } 
     } 
     else if(msg[0] == "sig-reply-enter-charge"){ 
      var elements = document.getElementsByClassName('overview'); 
      for (var i in elements) { 
       if (elements.hasOwnProperty(i)) { 
        elements[i].className = 'overview active'; 

       } 
      } 
      var elementy = document.getElementsByClassName('charge'); 
      for(var i in elementy){ 
       if(elementy.hasOwnProperty(i)){ 
        elementy[i].className = 'charge active'; 
       } 
      } 
     } 
     else { 
      //SignalsController.parseMessage(msg); 
      console.log("inside else condition"); 
      //console.log(msg[1]) 
      console.log("--received--->", msg); 
     } 
... 
}

它的外观接收信号 “sig-APP-状态变化的” 后

来源

2017-10-19 Isuru

你必须把myFunction的外document.onreadystatechange –

@NishadKAhamed - 这是最好的避免全局变量在可能的情况。 – Quentin

我认为这是一个简单的场景，使全局的变量和函数可以解决问题。我没有看到很多变数。 –

函数声明在中创建一个变量，当前范围。

您已将function myFunction() {声明在您分配给document.onreadystatechange的匿名函数中，因此只能从该函数内部进行访问。

你正试图从该函数的外部调用它，所以它不存在。

绑定使用addEventListener您的事件处理程序（并做到这一点从右边范围内），而不是使用onclick属性。

来源

2017-10-19 10:37:45 Quentin

可以请给我一个示例代码？我是新来的Js – Isuru

我链接到的MDN文档包括几个例子。 – Quentin

谢谢，通过使socketController成为一个全局变量并将myFunction（）放在document.onreadystatechange（）之外来解决它。 – Isuru

单页应用程序：未捕获ReferenceError：myFunction未定义

回答

相关问题