一个按钮在不同的点击中调用两个不同的功能

one button calls two different functions on different clicks

本文关键字：调用 功能 两个 按钮 一个      更新时间：2023-09-26
<script>
function one() {
   blah blah blah
}
function two() {
   blah blah blah
}
</script>
<button onclick="one(); two()">Click Me</button>

这将同时调用两个函数。我想要的是调用函数one()在第一次点击，然后调用函数two()在第二次点击。第三次点击调用函数three()，以此类推，直到第七次点击

我宁愿不使用jQuery如果可能的话

您可以使用IIFE来完成此操作:

var fn3 = (function() {
  var first = true;
  return function() {
    first ? fn1() : fn2();
    first = !first;
  }
})();
function fn1() {
  console.log(1);
};
function fn2() {
  console.log(2);
};
<button onClick="fn3()">click</button>

解决方案并不太复杂，您只需从另一个函数中获取一个()和两个()。

var callOne = true;
function one() {
   alert('Call one');
}
function two() {
   alert('Call two');
}
function call(){
   if(callOne) one();
  else two();
  callOne = !callOne;
}
<button onclick="call();">Click Me</button>

一种简单的方法是重新分配onclick的值:

<button id="clickme">Click Me</button>
<script>
  function one() {
     alert('one clicked');
     document.getElementById('clickme').onclick = two;
  }
  function two() {
   alert('two clicked');
  }
  document.getElementById('clickme').onclick = one;
</script>

使用此技巧，您可以选择在调用two()后禁用该按钮:

document.getElementById('clickme').onclick = null;

将点击处理程序切换回one():

document.getElementById('clickme').onclick = one;

我这样写

点击按钮有一个函数，根据调用次数决定调用哪个函数。

<button onclick="decideFunction()">Click Me</button>
var times = 0;
var one = function(){
    alert('first time');
}
var two = function(){
    alert('After first');
}
var decideFunction = function(){
    if(times == 0){
        one();
        times++;
    }
     else{
         two();
    }
}

第一次执行函数one，第二次执行函数two

最简单的方法是为false(或者true)定义一个额外的变量。虽然我们的变量是false，但单击button调用第一个函数并将变量更改为true。在第二次单击时，我们的onclick函数检查变量值并调用我们为true value定义的函数。

var button = document.getElementById('button');
var x = false; 
button.addEventListener('click', function(){
if(!x){
    alert('function 1');
    x = true;
    }else{
    alert('function 2');
    x = false;
    }  
})
相关文章：