3 Methods to Take array input from user in JavaScript

JavaScript

In this post, we will learn 3 Methods to Take array input from user in JavaScript. which one is the traditional method using the prompt() method that prompts a message that asks the user to input some values and returns the user-entered value other ways 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 javascript example, we will learn how to take array input from a user in JavaScript by using getElementById(). We have defined a function savedata() that access three textboxes ‘name’,’age’,’city’ values by their id with the help of getElementById() function and stores 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 the 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 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 users in JavaScript with examples.

Related Posts