Question

我是Javascript编程的新手，需要一些帮助。

我有一个HTML按钮，我想调用3个功能我第一次点击按钮，我想调用功能1 下次单击按钮时，我想调用功能2.
我第三次点击按钮，我想调用功能3.

我在想我可以使用if测试单击按钮时i++，
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";
}

这仅用于测试/练习，因此代码没有意义

但我认为还有另一种方式。

Answer 1

试试这个：

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

在javascript中，

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

Answer 2

//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]();
}

只需查看jsbin链接http://jsbin.com/dudubaxafu/edit?html,js,output

即可

Answer 3

您可以执行以下代码： -

HTML代码： -

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

javascript代码： -

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";
}

它可能对你有帮助。

Answer 4

我不建议通过窗口[＆＃34; i＆＃34;]来污染全局命名空间，这限制了你只有一个这样的按钮。

我会用这样的东西：

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

那么你可以像这样使用它：

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

这是一个小提琴样本： https://jsfiddle.net/h6qsam8e/

Answer 5

试试这个：

<input type='button' value = 'button' onclick='method1();method2();method3();'/>

一个HTML按钮，可以连续调用3个函数

5 个答案: