addEventListener單擊功能不起作用

Question

我需要將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（）。

在函數變量內部，鏈接似乎是“未定義的”，因此我假設它不能進入函數內部。 可能是什么問題？

Answer 1

這里的問題是，您有一個名為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>

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