w3resource

JavaScript: Add items in a blank array and display the items

JavaScript Array: Exercise-13 with Solution

Write a JavaScript program to add items in an blank array and display the items.

Sample Screen:
add elements in an blank array

Sample Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
body {padding-top:50px} 
</style> 
</head>
<body>
<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add" onclick="add_element_to_array();"></input>
<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div> 
</body>
</html>

JavaScript Code:

var x = 0;
var array = Array();

function add_element_to_array()
{
 array[x] = document.getElementById("text1").value;
 alert("Element: " + array[x] + " Added at index " + x);
 x++;
 document.getElementById("text1").value = "";
}

function display_array()
{
   var e = "<hr/>";   
    
   for (var y=0; y<array.length; y++)
   {
     e += "Element " + y + " = " + array[y] + "<br/>";
   }
   document.getElementById("Result").innerHTML = e;
}

Flowchart:

Flowchart: JavaScript: Display the colors entered in an array by a specific format

ES6 Version:

let x = 0;
const array = Array();

function add_element_to_array()
{
 array[x] = document.getElementById("text1").value;
 alert(`Element: ${array[x]} Added at index ${x}`);
 x++;
 document.getElementById("text1").value = "";
}

function display_array()
{
   let e = "<hr/>";   
    
   for (let y=0; y<array.length; y++)
   {
     e += `Element ${y} = ${array[y]}<br/>`;
   }
   document.getElementById("Result").innerHTML = e;
}

Live Demo:

See the Pen JavaScript: Add items in a blank array and display the items - array-ex-13 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to compute the sum and product of an array of integers.
Next: Write a JavaScript program to remove duplicate items from an array (ignore case sensitivity).

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter

JavaScript: Tips of the Day

Using the window.location object

JavaScript can access the current URL using the window.location object. Pretty neat, but even cooler is that this object contains certain parts of the URL as well.
Get access to the protocol/host/pathname/search/and more!

// JavaScript can access the current URL in parts. For this URL:
'https://thatsanegg.com/example/index.html?s=article'
window.location.protocol == 'https:'
window.location.host == 'thatsanegg.com'
window.location.pathname == '/example/index.html'
window.location.search == '?s=article'

Ref: https://bit.ly/2LBj213