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

Posted 2023-02-25

【中文标题】如何让 HTML 按钮的 onclick 事件随机触发两个不同功能之一？

【英文标题】：How do I make an HTML button’s onclick event trigger one of two different functions at random?

【发布时间】：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'   id="button"   />

【问题讨论】：

如果您想要切换功能获取文本并根据该调用特定功能。

How to use both onclick and ondblclick on an element? 的可能重复项

@Gert G：这与 OP 的问题无关。

这实际上是你的代码吗？因为这不会在我见过的任何网络浏览器中产生按钮。您的 HTML 标记不会有名称。您能在浏览器中查看源代码并从那里向我们展示代码吗？

【参考方案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' /> 。我试图把 id="button" 放在那里，但它不起作用......

【参考方案5】：

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


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

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

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