In this assignment you need to create an HTML page that meets the following requ
ID: 3677701 • Letter: I
Question
In this assignment you need to create an HTML page that meets the following requirements. The theme and content of the page can be of your choice. (Refer to Tutorial 13)
Create an HTML form.
Create and Initialize three arrays.
Use for-loops to populate those arrays.
Add an element to the end of one array.
Remove an element from the end of another array.
Add a new element to the beginning of one array.
Add at least one additional array method of your choice.
Convert an array to a string.
Use the converted string, assign to a string variable, and use it to populate a form field.
Create different functions to handle the operations of steps 4, 5, 6, and 7. (You can create additional array methods.)
Create four or more buttons on the form with different event handlers to start the above functions upon clicking them.
Create an additional button with an event handler to complete the operation in step 10.
Explanation / Answer
//find the below html code to required output i have added array reverse method additionally
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var Elements = [];
function addEle()
{
var ele=document.getElementById("elem").value;
if(ele!="")
{
Elements[Elements.length] =ele;
document.getElementById("elem").value="";
}
else
alert("enter element");
}
function addFront()
{
var ele=document.getElementById("elem").value;
if(ele!="")
{
Elements.unshift(ele);
document.getElementById("elem").value="";
}
else
alert("enter element");
}
function disRev()
{
Elements.reverse();
document.getElementById("dis").innerHTML = Elements;
}
function disEle()
{
var st="";
for (var i=0;i<Elements.length;i++)
{
st=st + Elements[i] + "<br >";
}
document.getElementById("dis").innerHTML = st;
}
</script>
</head>
<body>
<div align="center">
Enter array element and click add button to add element.
</div>
<div>
<form>
<input type="text" id="elem" name="ele">
<input type="button" name="add" value="AddAtEnd">
<input type="button" name="add" value="AddAtFront">
<input type="button" value="Display">
<input type="button" value="Reverse Display">
</form>
<p id="dis"></p>
</div>
</body>
</html>