Aufruf einer Funktion innerhalb einer von addEventListener aufgerufenen Funktion nicht möglich [Gelöst]

Grundsätzlich möchte ich in der Lage sein, eine Konfiguration aus einer CSV-Datei zu laden und sie zum Einrichten einer HTML-Seite zu verwenden. Nach etwas graben fand ich die übliche Lösung eines FileReader und eines AddEventListener. Mein HTML sieht so aus:Aufruf einer Funktion innerhalb einer von addEventListener aufgerufenen Funktion nicht möglich [Gelöst]

Edit: Materie ist gelöst, Code ist unten.

<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 

    } 

}

Dom.

Quelle

2017-02-27 Dom Kiki

Sie müssen den richtigen Kontext binden. Fügen Sie in Ihrer Kernelfunktion 'var self = this;' hinzu und verwenden Sie dann 'var reader = self.readSingleFile (e); –

Mein Browser mag nicht 'function kernel {' ohne die() – mplungjan

PS: Nächstes Mal drücken Sie bitte die '<>' Taste und erstellen Sie eine [mcve] – mplungjan

Sie verlieren den Ausführungskontext. Sie können das Problem beheben, indem die Bindung kernel.loadConfig Funktion kernel Objekt explizit mit Function.prototype.bind:

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

anonyme Funktion als Ereignishandler verwenden wird auch funktionieren:

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

Quelle

2017-02-27 13:46:24 dfsq

Aufruf einer Funktion innerhalb einer von addEventListener aufgerufenen Funktion nicht möglich [Gelöst]

Antwort

Verwandte Themen