2017-02-27 5 views
0

基本的には、.csvファイルから設定を読み込み、HTMLページを設定するために使用します。いくつかの調査の後、私はFileReaderとAddEventListenerの共通の解決策を見つけました。私のHTMLは次のようになります:addEventListenerで呼び出された関数内で関数を呼び出すことができません[解決済み]

編集:問題は解決され、コードは以下のとおりです。

<html> 
    <head> 
     <script src="kernel.js"></script> 
     <script> 
      var k = new kernel(); 
     </script> 
    </head> 

    <body> 

     <input type="file" id="file-input" /> 
     <script> 
      document.getElementById('file-input').addEventListener('change', k.readSingleFile, false); 
     </script> 

     <!-- Tables and stuff that i want to modify --> 

    </body> 
</html> 

kernel.js:

function kernel() { 

    var self = this; 
    this.config = null; 

    this.readSingleFile = function(e) { 

     var file = e.target.files[0]; 
     if (!file) return null; 

     var reader = new FileReader(); 
     reader.onload = function(e) { self.loadConfig(e); }; 
     reader.readAsText(file); 

    } 

    this.loadConfig = function(e) { 

     this.config = e.target.result; 
     console.log(this.config); 

     // Do more stuff 

    } 

} 

ドム。

+0

。あなたのカーネル関数で 'var self = this;'を追加し、 'var reader = self.readSingleFile(e);を使います。 –

+0

私のブラウザでは、 'function kernel {'には()がついていません。 – mplungjan

+0

PS:次回は '<>'ボタンを押して[mcve] – mplungjan

答えて

1

実行コンテキストが失われています。あなたはFunction.prototype.bindで明示的にkernel.loadConfig機能へkernelオブジェクトを結合することによってそれを修正することができます:

document.getElementById('file-input') 
    .addEventListener('change', kernel.loadConfig.bind(kernel), false); 

匿名関数を使用してイベントハンドラとしても動作します:あなたは正しいコンテキストをバインドする必要が

document.getElementById('file-input') 
    .addEventListener('change', function() { 
    kernel.loadConfig(); 
    }, false); 
関連する問題