javascript按钮从数组中选择随机项

时间:2013-05-25 21:04:31

标签: javascript button

请有人帮忙。我正在尝试在javascript中创建一个基本按钮,当单击时从我的数组中随机选择一个值并将其显示在屏幕上,每次单击该按钮时它应该从数组中选择一个新项目。我知道如何编写数组

var myarray = new Array("item1", "item2", "item3");

我只是不知道如何做按钮部分。任何帮助都会很棒。我知道在jQuery中执行此操作可能更容易,但我真的想在解决jQuery问题之前先了解一下javascript(请温柔,我是新来的大声笑)

5 个答案:

答案 0 :(得分:2)

你可以点击按钮调用一个函数来打印像这样的值

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<p id="message" ></p>

JS

function GetValue()
{
    var myarray= new Array("item1","item2","item3");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
}

JS Fiddle Demo

答案 1 :(得分:0)

使用javascript的随机函数在数组的上限和下限之间生成一个随机数。然后使用

myarray[Math.round(Math.random() * (myarray.length - 1))]

从数组中访问随机值。

您可以使用this链接查看热来生成最小和最大数字之间的随机数。 (对于你的情况,min总是0)。

答案 2 :(得分:0)

试试这个: HTML:

<input type="button" click="randomize()" value="Click me" />

JS:

function randomize(){
  var myarray = new Array("item1", "item2", "item3");
  var randomId =  Math.floor((Math.random()*myarray.length));
  var randomItem = myarray[randomid];

  alert(randomItem);
}

答案 3 :(得分:0)

http://jsfiddle.net/McKxp/

JS:

var arr = ["foo","bar","baz"];

function getItem(){
    document.getElementById("something").innerHTML = arr[Math.floor(Math.random() * arr.length)];
}

HTML

<div id="something"></div>
<input type="button" onclick="getItem()" value="Click me"/>

答案 4 :(得分:0)

以下是一个例子:

http://jsfiddle.net/kUgHg/2/

步骤如下:

  1. 创建一个按钮元素并为其指定一个ID:

    <button id="button1">Show random item</button>
    
  2. 获取脚本中按钮的引用:

    document.getElementById("button1");
    
  3. 根据数组长度计算数组中的随机索引:

    Math.floor(Math.random() * array.length)
    
  4. 向您的按钮添加click事件处理程序,该按钮在步骤3调用随机计算并以您想要的方式显示:

    button.onclick = function() { … }
    
  5. 一体化:

    var button = document.getElementById("button1");
    var myarray = ["a", "b", "c", "d"];
    
    button.onclick = function() {
        alert(myarray[Math.floor(Math.random() * myarray.length)]);
    };