Question

我有简单的代码，这是一个单页面的应用程序。我有几个html标题，每个标题分配给不同的类名。我试图根据websocket收到的信号显示/隐藏它们。此外，我已将onclick事件绑定到其中一些标头。但是一旦我点击标题，就会抛出一个错误，表明函数没有定义。任何人都可以告诉我这里我做错了什么。

的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);
        }
...
}

接收信号后的状态＆＃34; sig-app-state-changed＆＃34;

Answer 1

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

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

您正试图从该函数外部调用它，因此它不存在。

使用addEventListener绑定您的事件处理程序（并在右侧范围内执行），而不是使用onclick属性。

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

1 个答案: