CODEWITHSUNDEEP
javascriptaddeventlistener
Slavik Ostapenko
Slavik Ostapenko

Reputation: 113

"Cannot read property 'addEventListener' of null" error in javascript

I have a function that saves text into a txt file. It works on its own (when i have a simple html and js file), but when I add it to my program it throws this error:

Cannot read property 'addEventListener' of null

(function(view) {
    "use strict";
    var document = view.document, 
    $ = function(id) {
        return document.getElementById(id);
    }, 
    session = view.sessionStorage
    // only get URL when necessary in case Blob.js hasn't defined it yet
    , get_blob = function() {
        return view.Blob;
    }

    text = "slavik's text";
    save_file = $('saveFile'); 
    text_filename = "filename.txt";

    documemt.getElementById('saveFile').addEventListener("submit", function(event) {
        event.preventDefault();
        var BB = get_blob();
        saveAs(
            new BB(
                [text.value]
                , {type: "text/plain;charset=" + document.characterSet}
            )
            , (text_filename.value) + ".txt"
        );
    }, false);

    view.addEventListener("unload", function() {
        session.text = text.value;
        session.text_filename = text_filename.value;
    }, false);
}(self));

Here's the html part:

<div id="leftColumn">
    <ul>
        <li><a href="#" onclick="vaucherEntry(); return false; showVauchers()">Vaucher Entry</a></li>
        <li><a href="#" onclick="settings(); return false;">Settings</a></li>
        <li><a href="#" onclick="about(); return false;">About</a></li>
        <!--<button type="submit" onclick="saveFile()" id='saveFile'>Save File</button>-->

        <form id="saveFile">
            <input type="submit" value="Save file"/>
        </form>
    </ul>
</div>

Upvotes: 0

Views: 575

Answers (1)

ecarrizo
ecarrizo

Reputation: 2809

I've updated your code so it looks clearer, i removed some typo errors, so its not throwing any error now.

I just created the function saveAS, because it was needed in your logic and was missing, so check the differences with your code and fix it.

(function(view) {
    "use strict";
    var saveAs = function(param1, param2, param3) {
        console.log('you should do something with this params:');
        console.log(param1, param2);            
    },
        document = view.document, 
        $ = function(id) {
            return document.getElementById(id);
        }, 
        session = view.sessionStorage,
        // only get URL when necessary in case Blob.js hasn't defined it yet
        get_blob = function() {
            return view.Blob;
        },
        text = "slavik's text",
        save_file = $('saveFile'),
        text_filename = "filename.txt";

    document.getElementById('saveFile').addEventListener("submit", function(event) {
        event.preventDefault();
        var BB = get_blob();
        saveAs(new BB([text], {type: "text/plain;charset=" + document.characterSet }), text_filename);
    }, false);

    document.addEventListener("unload", function() {
        session.text = text.value;
        session.text_filename = text_filename.value;
    }, false);
}(self));

Fiddle

Upvotes: 1

Related Questions