How to write script tag inside build html in a javascript function?

Question

I am trying open build html(inside js funtion) to show table on a new tab. Now I am trying to add a js function for user to download table in excel format, but as soon as I try to add tag code breaks.

I tried following: Wrote download funtion inside script tag of built html code in js function. Added a new javascript file containing download js function. Added download function in a variable and tried including it in script tag. Used <script> instead of tag.

Following are my code:

var myfunction = function download() {
            $("#btnExport").click(function(e) {
                e.preventDefault();

                var data_type = "data:application/vnd.ms-excel";
                var table_div = document.getElementById("table_wrapper");
                var table_html = table_div.outerHTML.replace(/ /g, "%20");

                var a = document.createElement("a");
                a.href = data_type + ", " + table_html;
                a.download = "exported_table_" + Math.floor((Math.random() * 9999999) + 1000000) + ".xls";
                a.click();
            });
        };

        var html='<html><head><title>Locale Value</title><script>'+myfunction+'</script></head>'+
        '<body><h2>'+Header+'</h2><br><br><table>  <tr>    <th>Key</th>    <th>Value</th></tr>';

        for (var key in data) {
            var eachrow = '<tr>'
            + '<td>' + key + '</td>'
            + '<td>' + data[key] + '</td>'
            + '</tr>';
            html=html+eachrow;
        }
        html=html+'</table><br><br><button id="exportExcel" onclick="download()">Export</button></body></html>';
        return html;
    }

The problem here is as soon as I close script tag(i.e ), my main script tag (in which all functions are written) is shown as closed. And same appears on screen.

Have you tried onclick="myFunction()"? Also this is not the correct way to do. Use document.createElement('button') to create button and then use button.addEventListener to add handler to it. Alternatively you can even do $("#exportExcel").on('click', myFunction) — Rajesh Dixit
– Rajesh Dixit, Commented Jun 7, 2017 at 5:21
As soon as I write <script>'+myfunction+'</script> my code breaks. How do I include download function in my new html code ? — shiva kumar
– shiva kumar, Commented Jun 7, 2017 at 5:38
I have updated your code check below ans here was the problem : + myfunction +'</' + 'script></head>' — Laxman Gite
– Laxman Gite, Commented Jun 7, 2017 at 5:47

user7850752 · Accepted Answer · 2017-06-07 05:17:51Z

0

use "\" in a string. the symbol "\<" is an escape character for "<".

answered Jun 7, 2017 at 5:17

user7850752

Sign up to request clarification or add additional context in comments.

Comments

Laxman Gite · Accepted Answer · 2017-06-07 06:12:04Z

0

I have updated your code please check :

   $(function () {
    var myfunction = function download() {
        $("#btnExport").click(function (e) {
            e.preventDefault();

            var data_type = "data:application/vnd.ms-excel";
            var table_div = document.getElementById("table_wrapper");
            var table_html = table_div.outerHTML.replace(/ /g, "%20");

            var a = document.createElement("a");
            a.href = data_type + ", " + table_html;
            a.download = "exported_table_" + Math.floor((Math.random() * 9999999) + 1000000) + ".xls";
            a.click();
        });

    var html = '<html><head><title>Locale Value</title><script>' + myfunction + '</' + 'script></head>' +
    '<body><h2>' + Header + '</h2><br><br><table>  <tr>    <th>Key</th>    <th>Value</th></tr>';

    for (var key in data) {
        var eachrow = '<tr>'
        + '<td>' + key + '</td>'
        + '<td>' + data[key] + '</td>'
        + '</tr>';
        html = html + eachrow;
    }
    html = html + '</table><br><br><button id="exportExcel" onclick="download()">Export</button></body></html>';
    return html;
  };
});

edited Jun 7, 2017 at 6:12

answered Jun 7, 2017 at 5:42

Laxman Gite

2,3282 gold badges19 silver badges23 bronze badges

2 Comments

shiva kumar Over a year ago

Screen is coming blank, after looking into console it says: Invalid or unexpected token js code is showing as html=html+'</table><br><br><button id="exportExcel" onclick="download()">Export</button></div> even though my code is html=html+'</table><br><br><button id="exportExcel" onclick="download()">Export</button></body></html>';

Laxman Gite Over a year ago

I have updated my code plz copy and paste then it will work

Collectives™ on Stack Overflow

How to write script tag inside build html in a javascript function?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related