無法在由addEventListener調用的函數內調用函數[已解決]

基本上我希望能夠從.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 

    } 

}

大教堂。

來源

2017-02-27 Dom Kiki

需要綁定正確的上下文。在你的內核函數中，添加'var self = this;'然後使用'var reader = self.readSingleFile（e）; –

我的瀏覽器不喜歡''函數內核{'沒有（）（）或者 – mplungjan

PS：下一次請點擊''''按鈕並創建一個[mcve] – mplungjan

您正在失去執行上下文。您可以通過使用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);

來源

2017-02-27 13:46:24 dfsq

無法在由addEventListener調用的函數內調用函數[已解決]

回答

相關問題