3 Methods to Take array input from user in JavaScript

In this post, we will learn 3 Methods to Take array input from user in JavaScript. which one is the traditional method by using prompt() that prompt a message asks the user to input some values and return the user-entered value and other ways are get element value by ID using document.getElementById(),getElementsByName().

3 Methods to Take array input from user in JavaScript


  • Prompt() to Take array input from user in JavaScript
  • Take array input from user in JavaScript getElementById()
  • getElementsByName() to take array input from user in JavaScript

1. Prompt() to Take array input from user in JavaScript


In this javascript example, we will learn how to Take array input from users in JavaScript.We will ask users to input values for the array by using the prompt() function in javascript.

  • We are running the for loop five times.The prompt() function everytime ask for user input whenever the loop run.
  • After getting the array value from user.we are printing the final array
var myinputarr = [];
var size = 5; // Array size

for(var a=0; a<size; a++) 
{
	
	
	myinputarr[a] = prompt('Enter array Element ' + (a+1));
}

//user eneter array
console.log(myinputarr);

Output

["12", "14", "15", "16", "17"]

2. Take array input from user in JavaScript by using getElementById()


In this java script example we will learn how to take array input from user in JavaScript by using getElementById().We have define a function savedata() that access three textboxes ‘name’,’age’,’city’ values by their id with the help of getElementById() function and storing them in corresponding arrays ” arrCitys,arrNames,arrAges”

Secondly, define a function “displaydata()” in which we iterate over each array by using the spread operator to get the store value and display in div by ID “display”.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to take array input using JavaScript 
    </title>
</head>
  
<body style="text-align: center;">
<form>
   <h1>Please enter data</h1>
   <br>
      <label for="Name">Name</label> 
       <input id="name" type="text">
     <br> 
   
   <br>
     <label for="Age">Age</label>
   <input id="age" type="text">
   <br>
   <br>   
    <label for="city">City</label>
   <input id="City" type="text">
   <br>
   
   <br>
  <input type="button" value="Save" onclick="savedata()">
   <input type="button" value="Show data" onclick="displayData()">
   <br>
</form>
<div id="display"></div>

<script type="text/javascript">
var arrCitys=new Array();
var arrNames=new Array();
var arrAges=new Array();

function savedata(){
    var name = document.getElementById('name').value;
    var city = document.getElementById('City').value;
    var age = document.getElementById('age').value;
    arrCitys[arrCitys.length]=city;    
    arrNames[arrNames.length]=name;
    arrAges[arrAges.length]=age;
  }
  

function displayData() 
{
  var content="<b>Data Entered by User :</b><br>";
  content+= [...arrNames]+"</br>";
  content+=[...arrCitys]+"</br>";
  content+=[...arrAges]+"</br>";

  document.getElementById('display').innerHTML = content;
}


</script>

</body>
</html>

Output

Take array input from user in javascript

3. getElementsByName() to take array input from user


In this JavaScript example ,we will learn how to take array input from user by using getElementsByName() function.We have three textboxes with name =”txtval[]” which values we are accessing by using the function getElementsByName(‘txtval[]’)

  • We are looping through the all textboxes by using for loop.
  • Accessing each text box value by array index and display it on div by using this code document.getElementById(‘display’).innerHTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to take array input using JavaScript 
    </title>
</head>
  
<body style="text-align: center;">
<input type="text" name="txtval[]" value="" />
<input type="text" name="txtval[]" value="" />
<input type="text" name="txtval[]" value="" />
<input type="text" name="txtval[]" value="" />

<input type="button" value="Show data" onclick="showdata();" />
<div id ='display'>


</div>

<script type="text/javascript">

function showdata()
{
        var content="<b>Data Entered by User :</b><br>";
var input = document.getElementsByName('txtval[]');
          
            for (var x = 0; x < input.length; x++) 
            {
                var a = input[x];
                content = content + "myarray[" + x + "].value= "
                                   + a.value + "<br> ";   
              }
  
          
 document.getElementById('display').innerHTML = content+"</b>";
}

</script>

</body>
</html>

Output

Data Entered by User :
array[0].value= 1
array[1].value= 2
array[2].value= 3
array[3].value= 4

Summary

In this post, we have learned 3 Methods to Take array input from user in JavaScript with examples.