CODEWITHSUNDEEP
javascripthtml
brainmassage
brainmassage

Reputation: 1254

addEventListener click function does not work

I needed to save an html table's content in a .txt file. So I found this example:

page.html:

<html>
<body>
    <div>
        <textarea id="textbox">Type something here</textarea> 
        <button id="create">Create file</button> 
        <a download="info.txt" id="downloadlink" style="display: none">Download</a>
    </div>
</body>

create.js:

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

     if (textFile !== null) {
     window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };

  var create = document.getElementById('create'),
  textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();

This code has a text area. When you click the botton it creates a "Download" link and by clicking it you can download the text area content as a txt file.

I am trying to implement a very similar function. Only difference is I get my string from an html table. Here is the code:

html:

<div class="container">
<div class="row" style="">
    <section class="module span12" style="top: 50px">
        <div class="module-body">
            <button type="button" class="btn-blue"
                style="top: 80px; right: 130px;" onclick="loadOutputs()">Load
                Outputs</button>
            <button class="btn btn-blue" id="save" onclick="createText()"
                style="top: 80px; right: 130px;">Save</button>
            <a download="info.txt" id="downloadlink" style="display: block">Download</a>
            <div id="loadingElement" class="loaded">
                <table>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
    </section>
</div>
<div class="row"></div>

javascript:

function createText() {

    var text = '';
    var table = document.getElementById("tbody");
    if (table) {
        for ( var i = 0, row; row = table.rows[i]; i++) {
            text = text.concat(row.innerText);
            }
    }

    var textFile = null, makeTextFile = function(text) {

        var data = new Blob([text], {type: 'text/plain'});
        if (textFile !== null) {
            window.URL.revokeObjectURL(textFile);
        }

        textFile = window.URL.createObjectURL(data);
        return textFile;
    };

    var create = document.getElementById('save');

    create.addEventListener('click', function() {
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(text);
        link.style.display = 'block';
    }, false);
}

In the js code, when I debug, I see that it successfully fills the text variable with the contents of the table, but cannot get into create.addEventListener().

Inside the function variable link seems to be 'undefined', so I make the assumption that it cannot get inside of the function. What might be the problem?

Upvotes: 0

Views: 830

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem here is, you have a function called createText which is having all your code including the save handler... then your button's onclick attribute is calling the createText function....

In the above working sample the actual code is in a IIFE block which is executed on page load... so you need to either use a IIFE or call the function createText on page load and remove onclick="createText()" from the button since the actual click handler is registered using script. so

(function(){
    
    var textFile = null,
        makeTextFile = function (text) {
            
            var data = new Blob([text], {
                type: 'text/plain'
            });
            if (textFile !== null) {
                window.URL.revokeObjectURL(textFile);
            }
            
            textFile = window.URL.createObjectURL(data);
            return textFile;
        };
    
    var create = document.getElementById('save');
    
    create.addEventListener('click', function () {
        var text = '';
        var table = document.getElementById("tbody");
        if (table) {
            for (var i = 0, row; row = table.rows[i]; i++) {
                console.log('a')
                text = text.concat(row.innerText);
            }
        }
        
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(text);
        link.style.display = 'block';
    }, false);
})()
<table>
    <tbody id="tbody">
        <tr>
            <td>1.1</td>
        </tr>
        <tr>
            <td>2.1</td>
        </tr>
    </tbody>
</table>
<div class="container">
    <div class="row" style="">
        <section class="module span12" style="top: 50px">
            <div class="module-body">
                <button type="button" class="btn-blue"
                style="top: 80px; right: 130px;" onclick="loadOutputs()">Load
                    Outputs</button>
                <button class="btn btn-blue" id="save"
                style="top: 80px; right: 130px;">Save</button>
                <a download="info.txt" id="downloadlink" style="display: block">Download</a>
                <div id="loadingElement" class="loaded">
                    <table>
                        <tbody id="tbody"></tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
    <div class="row"></div>
</div>

Upvotes: 1

Related Questions