CODEWITHSUNDEEP
javascripthtml
Andreas Grahn
Andreas Grahn

Reputation: 11

One HTML button to invoke 3 functions consecutively

I am new to Javascript programming, and need some help.

I have one HTML button, and I want to invoke 3 functions.
The first time I click the button, I want to invoke function 1.
The next time I click the button, I want to invoke function 2.
The third time I click the button, I want to invoke function 3.

I was thinking that I could use if tests.
i++ when button is clicked,
if ( i == 1){ function1(); } .....

HTML

<button type="button" onclick="myFunction()">Hei</button>

Javascript

if(i == 1){
  test1();
}

if(i == 2){
  test2();
}

if(i == 3){
  test3();
}

function test1() {
  document.getElementById("print1").innerHTML = "test1"; 
}

function test2() {
  document.getElementById("print2").innerHTML = "test2";
}

function test3() {
  document.getElementById("print3").innerHTML = "test3";
}

This is just for testing/practice, so the code has no point

But I think there has to be another way.

Upvotes: 0

Views: 142

Answers (4)

Jodi Supporter
Jodi Supporter

Reputation: 330

I would not recommend polluting the global namespace via window["i"], which limits you to only one such button.

I would use something like this:

function cycle(){
   var i = 0;
   var args = arguments;
   return function(){
      args[i]();
      i++;
      if(i>=args.length)
        i = 0;
      }
 };

then you can use it like so:

document.getElementById("button1").addEventListener("click", cycle(
 function(){
 alert(1);
},
function(){
 alert(2);
},
 function(){
 alert(3);
}));

Here's a fiddle sample: https://jsfiddle.net/h6qsam8e/

Upvotes: 0

Harsh Sanghani
Harsh Sanghani

Reputation: 1722

You can do like following code :-

HTML code :-

<button type="button" onclick="myFunction()">Hei</button>

javascript code :-

i = 1;

function myFunction()
{
    if (i == 1)
    {
        i++;
        test1();
    }
    else if (i == 2)
    {
        i++;
        test2();
    }
    else if (i == 3)
    {
        i++;
        test3();
    }
}

function test1() {
  document.getElementById("print1").innerHTML = "test1"; 
}

function test2() {
  document.getElementById("print2").innerHTML = "test2";
}

function test3() {
  document.getElementById("print3").innerHTML = "test3";
}

It may help you.

Upvotes: 0

isambitd
isambitd

Reputation: 859

//Html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="triggerFunc()">Click Me</button>
</body>
</html>

//Javascript

var obj = {
f1: function() {
  alert('from f1');
},
f2: function() {
  alert('from f2');
},
  f3: function() {
  alert('from f3');
}
};
window.flag = 1;
function triggerFunc() {
  var flag  = window.flag + 1;
  if(flag > 3){
    flag = 1;
  }
  window.flag = flag;
  obj['f'+ flag]();
}

just check the jsbin link http://jsbin.com/dudubaxafu/edit?html,js,output

Upvotes: 1

domino_katrino
domino_katrino

Reputation: 366

Try this:

<button onclick="myFun(i)"></button>

in javascript,

function myFun(i) {
    (i===0 && function1()) || (i===1 && function2()) || function3();
}

Upvotes: 1

Related Questions