0
私は単一ページのアプリケーションである単純なコードを持っています。私はそれぞれが異なるクラス名に割り当てられたHTMLヘッダーはほとんどありません。私は、WebSocketによって受信された信号に基づいてそれらを表示/非表示しようとしています。また、私はこれらのヘッダーのいくつかにbind onclickイベントを持っています。しかし、ヘッダをクリックすると、関数が定義されていないというエラーがスローされます。誰でも私がここで間違っていることを教えてもらえますか？シングルページアプリケーション：Uncaught 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の一部は 
"SIG-APP-状態が-変更" 信号を受信した後、それがどのように見えるか
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);
}
...
}
を提出します
myFunctionをdocument.onreadystatechangeの外側に配置する必要があります。 –
@NishadKAhamed - できる限りグローバル変数を避けることをお勧めします。 – Quentin
私はこれを単純なシナリオと考え、グローバル変数と関数を作ることで問題が解決されると思います。私は多くの変数を見ていませんでした。 –