li onClick function not working

Question

I have the following files in the order it stands:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/music.js"></script>

in main.js I have the following code:

$(document).ready(function () {
       $('.song').click(function() {
        $('.footer').show('easeInExpo');
        audioPlayer(band, album, track);
    });
});

In music.js where the audioPlayer function is called:

function audioPlayer(band, album, track) {
 var audio = new Audio; //Class
audio.src = 'music/' + band + '/' + album + '/' + track + '.mp3';
audio.play();
}

The code that calls the function:

<li class="song" onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');"></li>

If I run this code I get: Uncaught ReferenceError: band is not defined

I have also tried to do the following with main.js:

$('.song').click(function(band, album, track) {
    $('.footer').show('easeInExpo');
    audioPlayer(band, album, track);
});

Which gives me: GET http://localhost/media/music/[object%20Object]/undefined/undefined.mp3 404 (Not Found)

Does anyone knows how to fix the audioPlayer() function problem? Please let me know if you need more information. Thanks in advance

Answer 1

The onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');" code within the li is set up to provide these parameters, but it's not spelled correctly onlick should be onclick .

And there is also a click event listener which is executed outside of that onclick function so it doesn't get any parameters.

---

One solution would be to change your li's to use data-attributes:

<li class="song" data-band="Band name" data-album="Album name" data-track="Track name"></li>

then modify the click listener as follows:

$('.song').click(function() {
    $('.footer').show('easeInExpo');
    var data = $(this).data();
    audioPlayer(data.band, data.album, data.track);
});

Answer 2

Remove the onClick listener on the li tag. Instead, in the jQuery, find the band, album, and track names and call the function. Something like this:

$('.song').click(function(band, album, track) {
$('.footer').show('easeInExpo');

var band = $(this).data("band");
var album = $(this).data("album");
var track = $(this).data("track");
audioPlayer(band, album, track);
});

And add the data attributes on the li:

<li class="song" data-band="test band" data-album="test album" data-track="test track"></li>

Answer 3

It looks like your problem with with the OnClick function:

Please try to change :

<li class="song" onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');"></li>

To:

  <li class="song" onclick="audioPlayer(\'' + bandname + ','+ albumName +','+ Track + \')"></li>

I am not sure if this is the only problem, but if it is you should really be doing this with proper DOM methods though.

var liElement = document.createElement('li');
liElement.addClass("song");
liElement.addEventListener('click', function(){
    audioPlayer(song.band,song.name,song.track);
});

​document.body.appendChild(liElement);​

Answer 4

Here, your

<li class="song" onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');"></li>

not works, reason is spelling mistake.

$(document).ready(function () {
   $('.song').click(function() {
    $('.footer').show('easeInExpo');
    audioPlayer(band, album, track);
});});

will not work, because you are not specified what are band, album, track in the scope. You will not require the jquery part if you are use 'onclick' in your li tag.