addEventListener单击功能不起作用

Question

I needed to save an html table's content in a .txt file. 我需要将html表的内容保存在.txt文件中。 So I found this example: 所以我找到了这个例子：

page.html: 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: 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. 当您单击该botton时，它将创建一个“下载”链接，然后单击该链接可以将文本区域内容下载为txt文件。

I am trying to implement a very similar function. 我正在尝试实现一个非常相似的功能。 Only difference is I get my string from an html table. 唯一的区别是我从html表中获取了字符串。 Here is the code: 这是代码：

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: 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(). 在js代码中，当我调试时，我看到它成功地用表的内容填充了text变量，但是无法进入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? 可能是什么问题？

Answer 1

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.... 这里的问题是，您有一个名为createText的函数，该函数具有包括保存处理程序在内的所有代码...然后您按钮的onclick属性正在调用createText函数。

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

addEventListener单击功能不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-18 08:47:10

addEventListener单击功能不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-18 08:47:10

解决方案1
1 已采纳 2014-12-18 08:47:10