javascript button to pick random item from array

Question

Please can someone help. I am trying to create a basic button in javascript that when clicked picks a value at random from my array and display it on the screen, each time the button is clicked it should pick a new item from the array. I know how to write the array

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

I just dont know how to do the button part. Any help would be great. I know it may be easier to do this in jQuery, but I really want to get my head round javascript before I tackle jQuery (please be gentle I am new to this lol)

Sachin · Accepted Answer · 2013-05-25 21:13:29Z

6

You can call a function on button click to print the value like this

<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

answered May 25, 2013 at 21:13

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2419017 Over a year ago

Thank you very much everyone who has contributed an answer. They have been a big help for me to understand what is going on with this. Thanks again!

Community · Accepted Answer · 2017-05-23 12:10:36Z

0

Use Random function of javascript to generate a random number between upper and lower limit of your array. Then use

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

to access a random value from the array.

You can use this link to see hot to generate a random number between a min and max number. (for your case min will always be 0).

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 25, 2013 at 21:09

Guanxi

3,14124 silver badges38 bronze badges

1 Comment

user2419017 Over a year ago

thanks, how would I write the code for the button to trigger the function is it something like <input onclick="myarray()" type="button" value="Click Me" id="myButton1" />

aquinas · Accepted Answer · 2013-05-25 21:14:47Z

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"/>

answered May 25, 2013 at 21:14

aquinas

23.9k5 gold badges60 silver badges82 bronze badges

Comments

Matt · Accepted Answer · 2013-05-25 21:16:54Z

0

Try this one: 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);
}

edited May 25, 2013 at 21:16

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered May 25, 2013 at 21:13

Epsil0neR

1,70416 silver badges25 bronze badges

Comments

Gabriel Petrovay · Accepted Answer · 2013-05-25 21:18:02Z

0

Here is an example:

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

The steps are:

Create a button element and give it an ID:

<button id="button1">Show random item</button>

Get a reference to the button in your script:
```
document.getElementById("button1");
```
Compute a random index in your array based on the array length:
```
Math.floor(Math.random() * array.length)
```
Add a click event handler to your button that calls the random computation at step 3 and shows it a way you want:
```
button.onclick = function() { … }
```

All in one:

var button = document.getElementById("button1");
var myarray = ["a", "b", "c", "d"];

button.onclick = function() {
    alert(myarray[Math.floor(Math.random() * myarray.length)]);
};

edited May 25, 2013 at 21:18

answered May 25, 2013 at 21:15

Gabriel Petrovay

22.2k28 gold badges109 silver badges182 bronze badges

Collectives™ on Stack Overflow

javascript button to pick random item from array

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related