addEventListener单击功能不起作用

debugcn 发表于 Dev

脑部按摩

我需要将html表的内容保存在.txt文件中。所以我找到了这个例子：

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);
})();

此代码有一个文本区域。当您单击该botton时，它将创建一个“下载”链接，单击该链接可以将文本区域内容下载为txt文件。

我正在尝试实现一个非常相似的功能。唯一的区别是我从html表中获取了我的字符串。这是代码：

的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);
}

在js代码中，当我调试时，我看到它成功地用表的内容填充了text变量，但是无法进入create.addEventListener（）。

函数变量内部的链接似乎是“未定义的”，因此我假设它不能进入函数内部。可能是什么问题？

阿伦·P·约翰尼（Arun P Johny）

这里的问题是，您调用了一个函数，该函数createText具有包括保存处理程序在内的所有代码...然后您按钮的onclick属性正在调用该createText函数...。

在上面的工作示例中，实际代码位于IIFE块中，该块在页面加载时执行...因此您需要使用IIFE或createText在页面加载时调用该函数，然后onclick="createText()"从按钮中删除，因为实际的点击处理程序是使用来注册的脚本。所以

(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>