0
Ich habe einfachen Code, der eine einzelne Seite Anwendung ist. Ich habe einige HTML-Header mit jeweils verschiedenen Klassennamen zugeordnet. Ich versuche, sie basierend auf dem vom Websocket empfangenen Signal anzuzeigen/zu verbergen. Auch ich habe Onclick-Ereignis auf einige dieser Header binden. Aber sobald ich auf den Header klicke, wird ein Fehler ausgegeben, dass die Funktion nicht definiert ist. Kann mir jemand sagen, was ich hier falsch mache?Einzelseite App: Uncaught ReferenceError: myFunction ist nicht definiert
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>
Teil 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);
}
...
}
Datei Wie es nach dem Signal "sig-App-state-changed" Empfang sieht 
Sie müssen die myFunction außerhalb document.onreadystatechange setzen –
@NishadKAhamed - Es ist am besten zu vermeiden, globale Variablen, wo immer möglich. – Quentin
Ich denke, dies ist ein einfaches Szenario und die globalen Variablen und Funktionen machen das Problem zu lösen. Ich habe nicht viele Variablen gesehen. –