Split a number into individual digits using JavaScript

24 Jan, 2022
In this article, we will get some input from user by using <input> element and the task is to split the given number into the individual digits with the help of JavaScript. There two approaches that are discussed below:Approach 1: First take the element from input element in string format (No need to convert it to Number) and declare an empty array(var res). Visit every character of the string in a loop on the length of the string and push the character in the array(res) by using push() method. 
Example: This example implements the above approach. 
html
<!DOCTYPE HTML><html> <head>    <title>        Split a number into individual        digits using JavaScript    </title>         <style>        body {            text-align: center;        }                     h1 {            color: green;        }        #geeks {            color: green;            font-size: 29px;            font-weight: bold;        }    </style></head> <body>    <h1>GeeksforGeeks</h1>         <p>        Type the number and click on the button        to perform the operation.    </p>         Type here:<input id = "input" />             <br><br>         <button onclick = "GFG_Fun();">        click here    </button>         <p id = "geeks"></p>         <script>        var down = document.getElementById('geeks');                 function GFG_Fun() {            var str = document.getElementById('input').value;            res = [];                         for (var i = 0, len = str.length; i < len; i += 1) {                res.push(+str.charAt(i));            }                         down.innerHTML = "[" + res + "]";        }    </script></body> </html>        
Output: 
Approach 2: First take the element from input element in string format (No need to convert it to Number) and declare an empty array(var res). Split the string by using split() method on (”) and store the splitted result in the array(str). 
Example: This example implements the above approach. 
html
<!DOCTYPE HTML><html> <head>    <title>        Split a number into individual digits    </title>         <style>        body {            text-align: center;        }                 h1 {            color: green;        }                 #geeks {            color: green;            font-size: 29px;            font-weight: bold;        }    </style></head> <body>    <h1>GeeksforGeeks</h1>         <p>        Type the number and click on the        button to perform the operation.    </p>         Type here: <input id="input" />         <br><br>         <button onclick="GFG_Fun();">        click here    </button>         <p id="geeks"></p>         <script>        var down = document.getElementById('geeks');         function GFG_Fun() {            var n = document.getElementById('input').value;            var str = n.split('');            down.innerHTML = "[" + str + "]";        }    </script></body> </html>
Output: 
saurabh1990aror
JavaScript-Misc
JavaScript-Numbers
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?