How to Randomize Array Position in JavaScript

Submitted by razormist on Monday, December 26, 2022 - 23:37.

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. 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. 	</head>
  7. <body>
  8. 	<nav class="navbar navbar-default">
  9. 		<div class="container-fluid">
  10. 			<a class="navbar-brand">Sourcecodester</a>
  11. 		</div>
  12. 	</nav>
  13. 	<div class="col-md-3"></div>
  14. 	<div class="col-md-6 well">
  15. 		<h3 class="text-primary">How to Randomize Array Position in JavaScript</h3>
  16. 		<hr style="border-top:1px dotted #ccc;"/>
  17. 		<button class="btn btn-primary" type="button" onclick="shuffle();">Shuffle</button>
  18. 		<div id="result" style="width:550px; height:300px; border:10px solid #ccc; padding:20px;"></div>
  19.  
  20. 	</div>
  21. <script src="script.js"></script>	
  22. </body>
  23. </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. 
  1. display();
  2.  
  3. function arrayRear(arr) {
  4.     for (var i = 0, rear = [], randomIndex = 0; i < arr.length; i++) {
  5.         randomIndex = Math.floor(Math.random() *  arr.length);
  6.         while (rear.indexOf(arr[randomIndex]) !== -1) {
  7.             randomIndex = Math.floor(Math.random() *  arr.length);
  8.         }
  9.        rear.push(arr[randomIndex]);
  10.     }
  11.  
  12. 	return rear;
  13. }
  14.  
  15. function display(){
  16. 	let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
  17. 	let html = "";
  18. 	for(let i=0; i<arr.length; i++){
  19. 		html += "<div width:200; height:200; style='margin:10px; font-size:50px; float:left;'>"+arr[i]+"</div>";
  20. 	}
  21. 	html += "<br style='clear:both;'/>";
  22.  
  23. 	document.getElementById('result').innerHTML = html;
  24. }
  25.  
  26. function shuffle(){
  27. 	let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
  28. 	let html = "";
  29. 	arrayRear(arr).forEach(function(item){
  30. 		html += "<div width:200; height:200; style='margin:10px; font-size:50px; float:left;' >"+item+"</div>";
  31. 	})
  32. 	html += "<br style='clear:both;'/>";
  33.  
  34. 	document.getElementById('result').innerHTML = html;
  35. }

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

Tags

Add new comment

About text formats
  • 103 views