es6 Uncaught ReferenceError：クラスが定義されていません

私はこれを短くしています。es6 Uncaught ReferenceError：クラスが定義されていません

私の問題は、初心者の典型的な問題です。基本的には、インデックス内のボタンでonClick="function();"をプルしようとしています。たびに、私はonClick="class.function();"または単にonClick="function();"が、それは動作しません書くかどうか、私は

Uncaught ReferenceError: controller is not defined(…) index.html:34

// Config.js \/ 
 
window.onload = config; 
 

 
function config() { 
 
    let controller = new Controller(); 
 
} 
 
// Config.js /\ 
 

 
class Controller { 
 

 
    constructor() { 
 
    // classes 
 
    let block = new Block(); 
 
    let view = new View(this); 
 
    let page = new Page(); 
 
    } 
 

 
    spawnBlock() { 
 
    this.view.drawBlock(page.getWidth()/2, page.getHeight()/2); 
 
    } 
 

 
} 
 

 
// The other classes 
 
class View { 
 

 
    constructor(Controller) { 
 
    let canvas = document.getElementById('canvas'); 
 
    let pen = canvas.getContext('2d'); 
 

 
    let block = Controller; 
 
    } 
 

 
    drawBlock(x, y) { 
 
    pen.beginPath(); 
 
    pen.moveTo(0, 0); 
 
    pen.lineTo(x, y); 
 
    pen.stroke(); 
 

 
    // Alt \/ 
 
    // let posX = x; 
 
    // let posY = y; 
 
    } 
 

 
} 
 

 
class Block { 
 

 
    constructor() { 
 
    // ... 
 
    } 
 

 
    // ... 
 

 
}

<!DOCTYPE html> 
 
<!-- V 0// --> 
 
<html> 
 
    <head> 
 
     <title>Index</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script type="text/javascript" src="script/Block.js"></script> 
 
     <script type="text/javascript" src="script/View.js"></script> 
 
     <script type="text/javascript" src="script/Controller.js"></script> 
 
     <script type="text/javascript" src="script/dump/page.js"></script> 
 
     <script type="text/javascript" src="script/config.js"></script> 
 
     <script type="text/javascript"> 
 
      // (config() { 
 
      //  let controller = new Controller(); 
 
      // })(); 
 
     </script> 
 
     <style type="text/css"> 
 
      * { 
 
       margin: 0px; 
 
       padding: 0px; 
 
      } 
 
      
 
      canvas { 
 
       width: 700px; 
 
       height: 400px; 
 
       border: solid black 1px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <center> 
 
      <canvas id="canvas"></canvas> 
 
      <br><button id="button" onClick="controller.spawnBlock();"> Click me </button> 
 
      <!-- /\ Uncaught ReferenceError: /\ --> 
 
     </center> 
 
    </body> 
 
</html>

を取得したボタンをクリックしました。前者のオプションを試してみると、クラスが定義されていないことがわかります。後者のオプションを試してみると、関数が定義されていないことがわかります。

私はいくつかのクラスメートに尋ねましたが、誰もそれを理解できませんでした。古いJavaScriptで使用する構文で動作するようになっていますが、それは私が目指しているものではありません。

私はStachoverflowとgoogleを一般的に試しましたが、何も助けなかったか、わかりやすいものでした。私はJqueryやプラグインのようなものを使用していません。ちょうどhtml、css、JavaScript。

お読みいただきありがとうございます。おそらく、このような単純な質問のためにはあまりにも多すぎたのですが、私はむしろ徹底的に調べています。

あなたは

出典

2016-12-14 Alex

Javascriptが奇妙な場合は、config（）関数を最後まで移動して違いがあるかどうかを確認してください。 – Merv

* "私はこれを短くしています。" * - 100以上のソースコードをペーストします。 – naomik

@naomik Haha、はい。少なくとも私は試しました^^ – Alex

JavaScriptでのスコープ設定の仕組みについてお読みください。 config関数内にcontroller変数を作成しました。このcontroller変数はこの関数に対してローカルであり、変数の外側にはアクセスできません。

から、それを変更してみてください：サイドノートとして

window.onload = config; 
let controller; 

function config() { 
    controller = new Controller(); 
}

に

window.onload = config; 

function config() { 
    let controller = new Controller(); 
}

、それは一般的に、あなたのHTMLにインラインイベントハンドラを設定しないように、より良い習慣と考えられています。私はaddEventListenerで読むことをお勧めします。最小限の例：

let button = document.getElementById('button'); 

button.addEventListener('click',() => { 
    controller.startBlock(); 
});

出典

2016-12-14 21:43:46 saadq

私はすでに正しい答えがそのようなものだったと感じていました。ありがとう、トン。私は同様のことをやろうとしましたが、varを使って、Controllerクラスではエラーを出すだけでした。コンストラクタのすぐ上に変数を作成できないようです。今では、自分の関数を定義し、他のクラスから使えるようにする方法を理解するだけです。 – Alex

を返信する場合は、本体のonloadイベントでコントローラオブジェクトをインスタンス化しようとすることができ、事前にありがとうございます。これを行う

<body onload="init()" >

function init() { 
    controller = new Controller(); 
    document.getElementById("button").addEventListener("click", controller.spawnBlock()); 
}

、あなたはすべての文書が任意のスクリプトを実行する前にロードされていることを保証します。

希望は役立ちます。

出典

2016-12-14 21:41:11

お使いのコントローラにのみconfig関数に対してローカルです：

function config() { 
    let controller = new Controller(); 
}

あなたがHTMLでこれを参照する場合、あなたはグローバル変数ではなく、アクセスすることはできません上記のローカル変数を、必要とします。

簡単な修正は、グローバルオブジェクトの上にあなたの変数を宣言することです：早く最初の火災以来、

function config() { 
    window.controller = new Controller(); 
}

（注）loadイベントの代わりにDOMContentLoadedを使用することができますが、それでもDOMが解析された後、：

document.addEventListener("DOMContentLoaded", config);

出典

2016-12-14 21:42:26 trincot

es6 Uncaught ReferenceError：クラスが定義されていません

答えて

関連する問題