Java Script function only runs once

Question

My Javascript/jQuery function is only running once and only the bottom part of the function is working. I can flip the order and then the other piece will work. What am I missing (using the Buzz audio API for the play and pause methods)?

var $playFromPlayerBar = $('.main-controls .play-pause');

var togglePlayFromPlayerBar = function(){
    if (currentSoundFile.pause() && $playFromPlayerBar.click){
        var $songNumberCell = getSongNumberCell(currentlyPlayingSongNumber);
        $songNumberCell.html(pauseButtonTemplate);
        $playFromPlayerBar.html(playerBarPauseButton);
        currentSoundFile.play();
    } 

    if (currentSoundFile.play() && $playFromPlayerBar.click){
        var $songNumberCell = getSongNumberCell(currentlyPlayingSongNumber);
        $songNumberCell.html(playButtonTemplate);
        $playFromPlayerBar.html(playerBarPlayButton);
        currentSoundFile.pause();
    }  

};

//load album when window loads
$(document).ready(function() {
    $playFromPlayerBar.click(togglePlayFromPlayerBar);
});

since you have placed the click function in document.ready it will be run only once when DOM is loaded — Nagaraj Raveendran
– Nagaraj Raveendran, Commented Oct 7, 2016 at 20:49
if you are rendering the toggle buttons again, you need to re-initiate the click event. The new elements you added to the DOM has no idea that there is a click event. — Ross
– Ross, Commented Oct 7, 2016 at 20:53

score 1 · Accepted Answer · 2016-10-07 21:01:12Z

1

The binding may be at fault here, try something like this:

$(document).ready(function() {
    $playFromPlayerBar.click(function() {
        togglePlayFromPlayerBar();
    });
});

Also you need to call the click function, you're doing this in your conditional expressions:

$playFromPlayerBar.click

You should be doing this:

$playFromPlayerBar.click()

edited Oct 7, 2016 at 21:01

answered Oct 7, 2016 at 20:52

user9903

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

3 Comments

user9903 Over a year ago

@charlietfl it could work, anything's possible in javascript ;-)

Rapid99 Over a year ago

the function does run again now (which is an improvement) however only the bottom portion of the function runs (which is the following):

if (currentSoundFile.play() && $playFromPlayerBar.click){         var $songNumberCell = getSongNumberCell(currentlyPlayingSongNumber);         $songNumberCell.html(playButtonTemplate);         $playFromPlayerBar.html(playerBarPlayButton);         currentSoundFile.pause();     }

user9903 Over a year ago

@Rapid99 you need to call the click function in your if checks.

Rapid99 · Accepted Answer · 2016-10-07 21:58:51Z

0

Aha!! I figured it out.

var togglePlayFromPlayerBar = function(){
    if ($playFromPlayerBar.click){
        var $songNumberCell =           getSongNumberCell(currentlyPlayingSongNumber);

        if (currentSoundFile.isPaused()){
            $songNumberCell.html(pauseButtonTemplate);
            $playFromPlayerBar.html(playerBarPauseButton);
        } else {
            $songNumberCell.html(playButtonTemplate);
            $playFromPlayerBar.html(playerBarPlayButton);
        }

        currentSoundFile.togglePlay();
    }
};


//load album when window loads
$(document).ready(function() {
    $playFromPlayerBar.click(togglePlayFromPlayerBar);
});

answered Oct 7, 2016 at 21:58

Rapid99

908 bronze badges

Collectives™ on Stack Overflow

Java Script function only runs once

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related