如何让 HTML 按钮的 onclick 事件随机触发两个不同功能之一？答案

【问题标题】：How do I make an HTML button’s onclick event trigger one of two different functions at random?如何让 HTML 按钮的 onclick 事件随机触发两个不同功能之一？
【发布时间】：2011-03-20 11:35:03
【问题描述】：

如何让 HTML 按钮的 onclick 事件随机触发两个不同功能之一？

我在服务器上使用 PHP，在客户端使用 jQuery。当我单击按钮图像时使用此代码没有任何反应...

function a(){  
    alert('A got called!');
}

function b(){  
    alert('B got called!');  
}  

$('#button').bind('click', function(){  
    var rnd = Math.floor(Math.random() * 2);  
    if(rnd)  
       a();  
    else  
       b();  
});

…………

< "base_url().'images/free.png';" rel="nofollow" border='0' align='center' alt="FREE"  id="button"   />

【问题讨论】：

如果您想要切换功能获取文本并根据该调用特定功能。
How to use both onclick and ondblclick on an element? 的可能重复项
@Gert G：这与 OP 的问题无关。
这实际上是你的代码吗？因为这不会在我见过的任何网络浏览器中产生按钮。您的 HTML 标记不会有名称。您能在浏览器中查看源代码并从那里向我们展示代码吗？

标签： php jquery html button random

【解决方案1】：

正如 Jon 所说，将一个函数附加到按钮的 onclick 事件，然后让该函数随机调用您的两个函数之一。

在 jQuery 中，你可以这样做：

function a(){
    alert('A got called!');
}

function b(){
    alert('B got called!');
}

$('#your_buttons_id_attribute').click(
    function(){
        var functions = [a,b];
        var index_of_function_to_call = Math.round(Math.random());
        functions[index_of_function_to_call]();
    }
);

【讨论】：

如果你要处理数组，那么也许你应该使用Math.round(Math.random() * functions.length)
@sje397：哦，是的，那会更好。我认为您需要 Math.floor 而不是 Math.round （请参阅下面的 jAndy 回答）。我更喜欢你的方法，因为它更简单。

【解决方案2】：

假设你有这样的代码：

$('#button').click(function() {
    // handler 1 code
});

$('#button').click(function() {
    // handler 2 code
});

你可以把它改成：

$('#button').click(function() {
  if(Math.random() < 0.5) {
    // handler 1 code
  } else {
    // handler 2 code
  }
});

【讨论】：

【解决方案3】：

附加一个事件处理程序，并让该单个处理程序随机决定要做什么。

例如，在 C# 中你可能会这样做：

private readonly Random rng = new Random();
...
button.Click += TakeRandomAction;
...
private static void TakeRandomAction(object sender, EventArgs e)
{
    if (rng.Next(2) == 0)
    {
        GiveUserPony();
    }
    else
    {
        NukePlanetFromOrbit(); // It's the only way to be sure
    }
}

细节在 jQuery / JavaScript 中可能有所不同，但基本上你仍然会让onclick 调用一个函数，然后它会计算出要做什么。

【讨论】：

嗯你有我可以探索的例子吗？编辑：好的，刚刚看到它。 PHP 有什么用？
@JEagle：哪一点给你带来了困难？你知道如何生成随机数吗？你知道如何从另一个函数调用一个函数吗？
@乔恩·斯基特。我有 2 onclick 独立工作。我担心的是如何将它们添加到同一个按钮。
@JEagle：仔细阅读 Jon 的回答：附加一个事件处理程序，并制作 那个单一的处理程序 决定做什么随机 .
@jAndy：当我回答这个问题时，没有任何迹象表明涉及到什么平台。但是，我留下了添加标签后的答案，因为无论平台如何，方法都是相同的。

【解决方案4】：

$('button').bind('click', function(){
    var rnd = Math.floor(Math.random() * 2);
    if(rnd)
       AnswerForEverthing();
    else
       WhatAmountOfWoodWouldAWouldchuckChuck();
});

【讨论】：

我在这里狡辩（可能只是误解了代码，现在还为时过早），但那不是在 25% 的时间里调用 AnswerForEverthing，在 75% 的时间里调用 WhatAmountOfWoodWouldAWouldchuckChuck 吗？换句话说，它并不像它可能的那样随机。
@Paul D. Waite：不，如果将Math.random() 的结果乘以3，就会发生这种情况。
@jAndy：啊！是的，对不起，Math.floor，明白了。
一直在尝试几个代码示例，但是当我删除 onclick 并替换为 id="button" 我不能让它工作了......
@jAndy，好的。现在我怎样才能使它与这条线一起工作： " rel="nofollow" border='0' align='center' alt="免费" /> 。我试图把 id="button" 放在那里，但它不起作用......

【解决方案5】：

function randomFunction() {
    var args = arguments;
    return function() {
        args[Math.floor(Math.random()*args.length)]();
    };
}

$('#id').click(randomFunction(functionOne, functionTwo));

尚未测试，希望它有效。工作原理：randomFunction 返回一个函数，该函数本身随机调用 randomFunction 的一个参数。

这种方法显然只有在你有多个事件时才有意义，你需要一个随机函数来响应它们。如果只是这一个事件，那么使用上面的一个版本会更简单。

【讨论】：