Simple onClick Every Other Click Javascript HTML

Question

onclick="HandleAction(\'playnow\');HandleAction(\'stop\');"

Performs the two functions simultaneously. No good since it just does the action \playnow\ and then \stop\ immediately after.

I need onClick to perform the function every other click.

Click 1: \playnow\

Click 2: \stop\

Click 3: \playnow\

etc.

Is there a simple way to achieve this?

Answer 1

Define a var which holds the current state:

var state = false;

function handleAction() {
    if (state == false) {
        // stuff for 'playnow' action

        state = true;
        return;
    }

    if (state == true) {
        // stuff for 'stop' action

        state = false;
        return;
    }
}

Answer 2

Yes. You could do something like

 var play=false,
     button = document.getElementById('playbtn'),
     audiotag = document.getElementById('audio');

 button.addEventListener('click', function(){
       if(play){
          audiotag.pause()
          play=true;
       }else{
          audiotag.play();
          play=false;
       }
 })

to make this work you could use html like this:

<div id="audioplayer">
    <button id="playbtn">play</button>
    <audio id="audiotag" src="path/to/audiofile"></audio>
</div>

so you would add the audio html like above and use getElementById to get each element in javascript. after that you attach an event listener to listen for the click event and call the handler which is the anonymous function. Inside that function, you can use the native play and pause methods directly on the audio object to stop audio when it's playing and then play it again when it's stopped.

there are other attributes you can add to the audio tag to start it playing as soon as the page loads. When you click the button, the play variable is set to true so it will pause on the first click and then sets that to false. A subsequent click will play it again and set the variable to true again and so on

Answer 3

Declare a global variable and interchange it depending on what is passed:

var switch = "playnow";

function handleAction(a) {
    if a === switch {
      alert(a);
    }
    else {
      alert(a);
      switch = a;
    } 
}

Answer 4

See my answer to this question.

Lets make a function called toggle that lets you specify actions that happen every other click

var toggle = function (a, b) {
    var togg = false;
    return function () {
        // passes return value back to caller
        return (togg = !togg) ? a() : b();
    };
};

We would then setup our click handler like this

button.addEventListener('click', toggle(function () {
    //play now logic
}, function () { 
    // stop logic
}));

Your click handler now alternates between the first and second functions with every click.

Answer 5

Tyr gave you an answer how to solve your problem. Here you go some notes which can help you design better code.

If you have i.e. one big animation and one button on your web, your code is perfectly ok, to keep the code simple is a good idea. But if you have something like this

<button onclick="...">Animation A</button>
<button onclick="...">Animation B</button>

Then you need better design. If you insert state global var into HandleAction, you break low coupling, HandleAction is bound to your single event and can't be reused elsewhere.

It is good to ask yourself What does this function do? In the first case, it is useful to choose better name, like HandleIntroAnimation. If it handles (any) animation, then it is good to specify it in the parameter.

function HandleAnimation(animation, play) {
  if(play) ... // playnow
  else ... // stop
}

This indeed does what the name tells. To use it in your code, write a proxy function:

<script>
// If you enhance your web, you only alter this code.
// HandleAnimation stays the same, regardless the changes.
var animationStatus = {}
function ToggleAnimation(animation) {
  animationStatus[animation] = !animationStatus[animation];
  HandleAnimation(animation, animationStatus[animation]);
}
</script>
<button onclick="toggleAnimation(this)">Animation A</button>
<button onclick="toggleAnimation(this)">Animation B</button>

Finally, you could completely decouple HTML and JS:

animations.js

window.addEventListener("load",function() {
  // HandleAnimation and ToggleAnimation definitions goes here
  // to avoid collisions in global namespace

  var anims = document.getElementsByClassName("animation");
  for(var i=0; i<anims.length; ++i) anims[i].addEventListener("click",function() {
    ToggleAnimation(anims[i]);
  });
});

your html

<script src="animations.js"></script>
<button class="animation">Animation A</button>
<button class="animation">Animation B</button>

and you have animation framework: every element with animation class magically toggles its animation. The animation data could be provided in data-* attribute, data-animation in this case.

Then you can provide it as open-source on github or use someone elses open code to fill the missing parts in your code where you were too lazy to code it yourself. Since many wheels were already invented, the only thing you need to code is usually proxy functions. That's how coders save each others time. Happy coding.