Problem passing parameters to function

Question

I have the following Javascript code to which I intend to pass parameters from an event onClick, but they are not recognised:

HTML

<a id="addplaylist" href="javascript:void(0);" onclick="Addplayer(true,'', '', '', 'public/playlist/playlist2.xml')" class="ouvir_album btn defaut" ><i class="fa fa-plus-square-o"></i> Incluir todas no player</a>

JS

$(document).ready(function () {

    var url = '<?php echo base_url();?>';

    function Addplayer(album, titulo, artista, capa, urlfile) {

        if (album == false) {

            myPlaylist.add({
                title: titulo,
                artist: artista,
                poster: capa,
                mp3: encodeURI(urlfile)
            });
            myPlaylist.play()

        } else {

            alert(urlfile);

            $.ajax({
                type: "GET",
                url: url + urlfile,
                dataType: "xml",
                success: function (xml) {

                    $(xml).find('track').each(function () {
                        var self = $(this),
                            titulo = self.find('title').text(),
                            artista = self.find('artist').text(),
                            urlfile = self.find('mp3').text(),
                            capa = self.find('poster').text(),
                            playlist = JSON.stringify({
                                title: titulo,
                                artist: artista,
                                mp3: urlfile,
                                poster: capa
                            }),
                            playlistObject = $.parseJSON(playlist);

                        myPlaylist.add(playlistObject);
                    });
                }
            });

        }

    }


    var cssSelector = {
        jPlayer: "#player_thumbs",
        cssSelectorAncestor: "#jp_container_N"
    };

    var playlist = [

    ];
    var options = {
        swfPath: url + "public/js/Jplayer.swf",
        supplied: "webmv, mp3",
        keyEnabled: true,

        volumechange: function (event) {
            if (event.jPlayer.options.muted) {
                $(".jp-volume-bar").slider("value", 0);
            } else {
                $(".jp-volume-bar").slider("value", event.jPlayer.options.volume);
            }
        },

        timeupdate: function (event) {
            $(".jp-progress").slider("value", event.jPlayer.status.currentPercentAbsolute);
        },

        playlistOptions: {
            enableRemoveControls: true
        },

        play: function (event) {
            $(".equalize span").addClass("active");
        },
        pause: function (event) {
            $(".equalize span").removeClass("active");
        }
    };

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    var PlayerData = $(cssSelector.jPlayer).data("jPlayer");

    // Create the volume slider control
    $(".jp-volume-bar").slider({
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value: $.jPlayer.prototype.options.volume,
        slide: function (event, ui) {
            $(cssSelector.jPlayer).jPlayer("option", "muted", false);
            $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
        }
    });

    // Create the progress slider control
    $(".jp-progress").slider({
        animate: "fast",
        max: 100,
        range: "min",
        step: 0.1,
        value: 0,
        slide: function (event, ui) {
            var sp = PlayerData.status.seekPercent;
            if (sp > 0) {
                // Move the play-head to the value and factor in the seek percent.
                $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
            } else {
                // Create a timeout to reset this slider to zero.
                setTimeout(function () {
                    $(".jp-progress").slider("value", 0);
                }, 0);
            }
        }
    });


    $(".title_music").hover(function () {
        $('.jp-title').toggleClass('marquee');
    });

});

What I’m doing wrong so I can’t pass the parameters to the function?

Answer 1

Your problem is in the scope of the function and some variables that need to be declared globally.

How you got it all inside the box $(document).ready(function() { /**/ }); your event onClick does not recognize your function Addplayer() and consequently also your variable playlist.

Therefore, this part of the code must be outside so that it can be declared globally.

The code in the duly corrected question:

var url = '<?php echo base_url();?>';

function Addplayer(album, titulo, artista, capa, urlfile) {

    if (album == false) {

        myPlaylist.add({
            title  : titulo,
            artist : artista,
            poster : capa,
            mp3    : encodeURI(urlfile)
        });

        myPlaylist.play();

    } else {

        alert(urlfile);

        $.ajax({
            type: "GET",
            url: url + urlfile,
            dataType: "xml",
            success: function(xml) {

                $(xml).find('track').each(function() {

                    var self           = $(this),
                        titulo         = self.find('title').text(),
                        artista        = self.find('artist').text(),
                        urlfile        = self.find('mp3').text(),
                        capa           = self.find('poster').text(),
                        playlist       = JSON.stringify({ title: titulo, artist : artista, mp3 : urlfile, poster : capa }),
                        playlistObject = $.parseJSON(playlist);

                    myPlaylist.add(playlistObject);
                });
            }
        });

    }
}

var cssSelector = {
    jPlayer: "#player_thumbs",
    cssSelectorAncestor: "#jp_container_N"
};

var playlist = [];


// Documento pronto e com jQuery, bora lá
$(document).ready(function(){

    var options = {
        swfPath: url + "public/js/Jplayer.swf",
        supplied: "webmv, mp3",
        keyEnabled: true,
        volumechange: function(event) {
            if (event.jPlayer.options.muted) {
                $( ".jp-volume-bar" ).slider("value", 0);
            } else {
                $( ".jp-volume-bar" ).slider("value", event.jPlayer.options.volume);
            }
        },
        timeupdate: function(event) {
            $( ".jp-progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
        },
        playlistOptions: {
            enableRemoveControls: true
        },
        play: function (event) {
            $(".equalize span").addClass("active");
        },
        pause: function (event) {
            $(".equalize span").removeClass("active");
        }
    };

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    var PlayerData = $(cssSelector.jPlayer).data("jPlayer");

    // Create the volume slider control
    $( ".jp-volume-bar" ).slider({
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value : $.jPlayer.prototype.options.volume,
        slide: function(event, ui) {
            $(cssSelector.jPlayer).jPlayer("option", "muted", false);
            $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
        }
    });

    // Create the progress slider control
    $( ".jp-progress" ).slider({
        animate: "fast",
        max: 100,
        range: "min",
        step: 0.1,
        value : 0,
        slide: function(event, ui) {
            var sp = PlayerData.status.seekPercent;
            if (sp > 0) {
                // Move the play-head to the value and factor in the seek percent.
                $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
            } else {
                // Create a timeout to reset this slider to zero.
                setTimeout(function() {
                    $( ".jp-progress" ).slider("value", 0);
                }, 0);
            }
        }
    });

    $(".title_music").hover(function(){
        $('.jp-title').toggleClass('marquee');
    });

});

^{After chat in http://chat.stackexchange.com/rooms/19642/discussion-between-sergio-and-uellington-palma it was concluded that the problem lay in the way the code was being placed on the page.
View the chat or the issue asked in the question and this answer for a better understanding of the change made in both.}