How create a javascript function that returns a html

Question

First of all, give thanks for reading my question and try to help me and apologize for my English.

My idea is create a library, function that from index.html returns a html. For example, I call the function with: Video.generateIframe("1", controls, "video1") in index.html

"1" is the id of my video, controls are an array of options to show and "video1" is the id of the div.

My problem is that I dont know how return an html, well... when I execute the javascript returns next error:

Uncaught SyntaxError: Unexpected strict mode reserved word.

How can solve it?

var Video = (function () {

    'use strict';

    var publicAPIs= {};

    // public method
    publicAPIs.generateIframe = function(id, controls, target) {

        let src = generateSrc(id, controls);

        let iframe = '\n<div id=\'' + target + '\'>\n\t<iframe frameBorder="0" src=\'' + src + '\'>\n\t\t<p>Your browser not support iframes.</p>\n\t</iframe>\n</div>';
    };

    // private method
    var generateSrc = function(id, controls) {
        let urlServer = `http://example.com/panel?selectVideo=${id}`;

        (controls.video) ? urlServer += '&video=1' : urlServer+= '&video=0';
        (controls.stop) ? urlServer += '&stop=1' : urlServer+= '&stop=0';
        (controls.fullscreen) ? urlServer += '&fullscreen=1' : urlServer+= '&fullscreen=0';

        return urlServer;
    };

    return publicAPIs;

})();

EDIT:

Sorry, variable is publicAPIs... I generate a string with div container, now I think that I should append to other html component, a parent html component?

The symbol public is reserved in strict mode. You call it publicAPIs later anyway. — Pointy
– Pointy, Commented Jan 29, 2019 at 16:54
You should return HTML as a string, HTML format is invalid in JavaScript — Madmadi
– Madmadi, Commented Jan 29, 2019 at 16:56
return (<div id={target}>... This is known as JSX, popular with React. You will need a transpiler to be able to return this. You could return a string like @Madmadi mentions, or return a DOM node, that you prammatically created. — Keith
– Keith, Commented Jan 29, 2019 at 16:59
changed and returned as string, now I have to append to a html parent component? — Javier
– Javier, Commented Jan 30, 2019 at 7:29

3 revs · Accepted Answer · 2019-10-16 06:17:08Z

1

The public, private keywords are access modifiers of class methods and variables. It's not implemented in JavaScript though. But, the spec reserves them for future usage.

In strict mode, reserved keywords cannot be used. Therefore you've received a SyntaxError. Remove the explicit declaration of strict mode or change the variable names to something else corresponding to what you indent.

edited Oct 16, 2019 at 6:17

community wiki

3 revs
nullptr

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

1 Comment

Javier Over a year ago

Thanks, I changed reserved word.. but the code is written in js

Javier · Accepted Answer · 2019-01-30 07:51:50Z

0

I solved it! I hope it is good, or if you can show me a better solution I apreciate it.

var Video = (function () {

    'use strict';

    var publicAPIs= {};

    // public method
    publicAPIs.generateIframe = function(id, controls, target) {

        let src = generateSrc(id, controls);

        appendToDiv(src, target);
    };

    // private method
    var appendToDiv = function(link, target) {
        var iframe = document.createElement('iframe');
        iframe.frameBorder = 0;
        iframe.width="500px";
        iframe.height="400px";
        iframe.id="iframe-" + target;
        iframe.setAttribute("src", link);
        document.getElementById(target).appendChild(iframe);
    };

    // private method
    var generateSrc = function(id, controls) {
        let urlServer = `http://example.com/panel?selectVideo=${id}`;

        (controls.video) ? urlServer += '&video=1' : urlServer+= '&video=0';
        (controls.stop) ? urlServer += '&stop=1' : urlServer+= '&stop=0';
        (controls.fullscreen) ? urlServer += '&fullscreen=1' : urlServer+= '&fullscreen=0';

        return urlServer;
    };

    return publicAPIs;

})();

answered Jan 30, 2019 at 7:51

Javier

2,1234 gold badges26 silver badges54 bronze badges

4 Comments

tripulse Over a year ago

Nice, to hear that. But, you shouldn't post answers like this.

Javier Over a year ago

Sorry, How should I post my answers?

tripulse Over a year ago

Instead of posting these. You should edit the question itself indicating a edited version of the code.

Javier Over a year ago

ahhh ok.. sorry

Collectives™ on Stack Overflow

How create a javascript function that returns a html

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related