LuiKiepon
Testing Framework Developer
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
How to Randomize Array Position in JavaScript
Introduction
In this tutorial we will create a How to Randomize Array Position in JavaScript. This tutorial purpose is to teach you how to randomize the array position. This will cover all the basic parts of the function that will randomize the array index position. I will provide a sample program to show the actual coding of this tutorial.
This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program purpose is to show you how to randomize the array index position. I will give my best to provide you the easiest way of creating this program Randomize array position. So let's do the coding.
Before we get started:
This is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will only array value and the button. To create this simply copy and write it into your text editor, then save it as index.html.
Creating JavaScript Function
This is where the main function of the application is. This code will randomize the array position when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js.
In the code above we create a special method called arrayRear(), this function will randomize the array index position of the targeted array. We will only create a method that will only display the array value and an event that will be triggered by binded button. To randomize the index postion of an array we will only just append the array value into the method that we created the arrayRear().
Output:
The How to Randomize Array Position in JavaScript source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Randomize Array Position in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
Introduction
In this tutorial we will create a How to Randomize Array Position in JavaScript. This tutorial purpose is to teach you how to randomize the array position. This will cover all the basic parts of the function that will randomize the array index position. I will provide a sample program to show the actual coding of this tutorial.
This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program purpose is to show you how to randomize the array index position. I will give my best to provide you the easiest way of creating this program Randomize array position. So let's do the coding.
Before we get started:
This is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will only array value and the button. To create this simply copy and write it into your text editor, then save it as index.html.
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <meta
charset
=
"UTF-8"
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
/
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap.css"
/
>
- </
head
>
- <body
>
- <nav
class
=
"navbar navbar-default"
>
- <div
class
=
"container-fluid"
>
- <a
class
=
"navbar-brand"
>
Sourcecodester</
a
>
- </
div
>
- </
nav
>
- <div
class
=
"col-md-3"
></
div
>
- <div
class
=
"col-md-6 well"
>
- <h3
class
=
"text-primary"
>
How to Randomize Array Position in JavaScript</
h3
>
- <hr
style
=
"border-top:1px dotted #ccc;"
/
>
- <button
class
=
"btn btn-primary"
type
=
"button"
onclick
=
"shuffle();"
>
Shuffle</
button
>
- <div
id
=
"result"
style
=
"width:550px; height:300px; border:10px solid #ccc; padding:20px;"
></
div
>
- </
div
>
- <script
src
=
"script.js"
></
script
>
- </
body
>
- </
html
>
Creating JavaScript Function
This is where the main function of the application is. This code will randomize the array position when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js.
- display(
)
;
- function
arrayRear(
arr)
{
- for
(
var
i =
0
,
rear =
[
]
,
randomIndex =
0
;
i <
arr.length
;
i++
)
{
- randomIndex =
Math
.floor
(
Math
.random
(
)
*
arr.length
)
;
- while (
rear.indexOf
(
arr[
randomIndex]
)
!==
-
1
)
{
- randomIndex =
Math
.floor
(
Math
.random
(
)
*
arr.length
)
;
- }
- rear.push
(
arr[
randomIndex]
)
;
- }
- return
rear;
- }
- function
display(
)
{
- let arr =
[
"0"
,
"1"
,
"2"
,
"3"
,
"4"
,
"5"
,
"6"
,
"7"
,
"8"
,
"9"
,
"10"
,
"11"
,
"12"
,
"13"
,
"14"
,
"15"
,
"16"
,
"17"
,
"18"
,
"19"
,
"20"
]
;
- let html =
""
;
- for
(
let i=
0
;
i<
arr.length
;
i++
)
{
- html +=
"<div width:200; height:200; style='margin:10px; font-size:50px; float:left;'>"
+
arr[
i]
+
"</div>"
;
- }
- html +=
"<br style='clear:both;'/>"
;
- document.getElementById
(
'result'
)
.innerHTML
=
html;
- }
- function
shuffle(
)
{
- let arr =
[
"0"
,
"1"
,
"2"
,
"3"
,
"4"
,
"5"
,
"6"
,
"7"
,
"8"
,
"9"
,
"10"
,
"11"
,
"12"
,
"13"
,
"14"
,
"15"
,
"16"
,
"17"
,
"18"
,
"19"
,
"20"
]
;
- let html =
""
;
- arrayRear(
arr)
.forEach
(
function
(
item)
{
- html +=
"<div width:200; height:200; style='margin:10px; font-size:50px; float:left;' >"
+
item+
"</div>"
;
- }
)
- html +=
"<br style='clear:both;'/>"
;
- document.getElementById
(
'result'
)
.innerHTML
=
html;
- }
In the code above we create a special method called arrayRear(), this function will randomize the array index position of the targeted array. We will only create a method that will only display the array value and an event that will be triggered by binded button. To randomize the index postion of an array we will only just append the array value into the method that we created the arrayRear().
Output:
The How to Randomize Array Position in JavaScript source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Randomize Array Position in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
You must upgrade your account or reply in the thread to view hidden text.