Unlock JavaScript's power to generate random numbers & characters from selected or defined values! In this blog post you'll learn how to generate random number and characters from specific or defined values using JavaScript.
By the end of this blog post you'll also get and idea to generate random specific special characters, alphanumeric values etc.
Generating Random Characters From Your Selected Characters:
1. Generate a random number:
First, we generate a random number using JavaScript's built-in functions Math.random() and Math.floor().
2. Use the generated number as an index:
Then we use this generated random number as an index within the predefined string.
3. Extract characters:
This allows us to extract specific characters from the string based on the generated random value (use as index values). So we get only characters from pre defined string, means we get the values from our string values that we defined.
See the commented code below for a better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate random characters from specific characters. | maketechstuff.com</title>
</head>
<body>
<div class="box">
<input type="text" class="input_field">
<button type="button" class="button">Generate</button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #EF5350;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
text-align: center;
width: 400px;
}
input{
width: 100%;
font-size: 50px;
text-align: center;
padding: 10px 0px;
margin: 20px 0px;
border: none;
outline: none;
pointer-events: none;
}
button{
width: 100%;
font-size: 40px;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: black;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
button:active{
scale: 0.9;
}
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
button.addEventListener("click", generate_random_number);
// Length of characters to generate.
let random_number_length = 6;
function generate_random_number() {
// Pre defined string.
// specific characters from which we will generate random characters.
let string = "abcedfg";
input_field.value = "";
for (let i = 0; i < random_number_length; i++) {
// Generating random number.
let random_number = Math.floor(Math.random() * string.length);
// Adding string characters inside input field based on index value generated (random_number).
input_field.value += string[random_number];
}
}
As you can see, I have added the string "abcdefg" so that we can get or generate random characters from "abcdefg" only. See the demo below.
Output:
Like wise you can generate specific random numbers.
Generating Specific Random Numbers From Your Selected Numbers:
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
button.addEventListener("click", generate_random_number);
// Length of characters to generate.
let random_number_length = 6;
function generate_random_number() {
// Pre defined string.
// specific characters from which we will generate random characters.
let string = "1234";
input_field.value = "";
for (let i = 0; i < random_number_length; i++) {
// Generating random number.
let random_number = Math.floor(Math.random() * string.length);
// Adding string characters inside input field based on index value generated (random_number).
input_field.value += string[random_number];
}
}
As you can see, I have added the string "1234" so that we can get or generate random characters from "1234" only. See the demo below.
Output:
Like wise you can generate specific random specific characters, alpha numeric values etc.
So that’s how you can generate specific random numbers, characters, special characters, alpha numeric values etc. using JavaScript with just a click. If you have any query or suggestion, feel free to write in the comment section.
Thanks for reading.
You may like:
- How to generate random OTP using JavaScript.
- How to generate a random alphanumeric values on click using JavaScript.
- How to generate the random passwords using JavaScript.
- Create captcha generator using JavaScript.
- Create input field that accept only alphanumeric values with JavaScript.
Share your thoughts.