Generated functions

Question

I'm not sure if this is best practice or the complete wrong way to do this but I am trying to dynamically generate some functions and use them on button clicks. The buttons are also dynamically generated.

I am making a twitch stream switcher for my guild website and instead of adding more and more code manually for each streamer that signs up I want to just add a single function call. right now I have this:

<script id="buttonScripts">
twitchStatus('player1');
twitchStatus('player2');
twitchStatus('player3');

function twitchStatus(twitchName){
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName,  function(streamData){
    if (streamData.stream == null){
        $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/toffline.png"></button>');
        $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}');
    } else {
        $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/tonline.png"></button>');
        $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}');
        }
    })
};
</script>

The script generates the button and function if it detects them on or offline but uses a different png to show the status. The function itself modifies the embed object to replace the URL for the stream with the selected streamers url and it works perfectly when it is not generated through this function.

The generated functions are appended to the bottom of the script so they live in the same set of script tags. Is there something i am missing that would prevent them from being accessible to the onclick call from the buttons?

twitchswitcher.html:1 Uncaught ReferenceError: player1Function is not defined — The_Bent, Sep 06 '16 at 14:21

score 2 · Answer 1 · answered Sep 06 '16 at 14:22

Dynamically appending content to a script tag is not a great pattern to follow - and will probably not work in all browsers.

A better solution is to use a single delegated event handler on your button elements which uses data attributes to change its behaviour for each button. Something like this:

function twitchStatus(twitchName) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName,  function(streamData) {
        var image = streamData.stream == null ? 'toffline' ? 'tonline';
        $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" data-name="' + twitchName + '">' + twitchName + '\'s Stream<img src="images/' + image + '.png"></button>');
    })
};

$(twitchButtons).on('click', '.btn', function(e) {
    e.preventDefault();
    $("#live_embed_player_flash").attr('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + $(this).data('name'));
})

Thanks Rory, that is a lot better than what I have. – The_Bent Sep 06 '16 at 14:41 — The_Bent, Sep 06 '16 at 14:41

score 0 · Answer 2 · answered Sep 06 '16 at 14:20

It would be better to include the function in the page by default, and then pass the name as a parameter. There are many ways of doing this, but this is the approach I'd take...

function twitchStatus(twitchName) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName,  function(streamData) {

        var $button = $("<button/>", {
            "class": "btn btn-fill btn-round",
            "data-twitchname": twitchName,
            "text": twitchName + "'s Stream",
            "type": "button"
        });

        if (streamData.stream == null) {
            var $img = $("<img/>", { "src": "images/toffline.png" });
            $button.append($img);
        }
        else {
            var $img = $("<img/>", { "src": "images/tonline.png" });
            $button.append($img);
        }

        $button.on("click", function() {
            onButtonClick($(this).data("twitchname"));
        });

        $(twitchButtons).append($button);
    })
};

function onButtonClick(twitchName) {
    var StreamObject = document.getElementById("live_embed_player_flash");
    if (StreamObject != null) {
        StreamObject.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + twitchName + ");}}");
    }
}

Generated functions

2 Answers2