How To Empty An Array In JavaScript
How To Empty An Array In JavaScript , In this Article i will show you how to empty an Array in JavaScript using 2 Methods.
In this Sample Application i will use a few JavaScript function listed below
- document.getElementById().innerHTML ,
- yourArrayName.push()
- yourArrayName.length
To Create This Sample, i will need few things Setup in HTML
- A Text Box for the User to enter the value
- A Button for the User to Click ,in order to Store the Array into the Array Variable
- A Button for the User to Click , to Check whats inside the Array
- A Button for the User to Click to Empty the Array ( 1st Array Empty Method)
- A Button for the User to Click to Empty the Array ( 2nd Array Empty Method
I have created 4 Function all together
- outArray() -> This Function will print out all element inside the Array
- cArray () -> This Function will push the User input Value into the Array
- e1Array() -> This Function will empty the Array ( Method 1)
- e2Array() -> This Function will empty the Array ( Method2)
The How To Empty An Array In JavaScript Application is as Below
Click the below button to see what is inside our Array Element
Enter an Element you want to create inside the Array :
How To Code This
- Create the HTML Structure Doc type, Head, Body Etc , I attached the code in this Blog , feel free to copy it for your reference
- Create the Function outArray() to print out whats inside the Array.
- newArray.toString(); , convert the User inputed Array into String
- document.getElementById(“outputArray”).innerHTML = newArray; ->This will embed the Value found in the Array to HTML.
- Create the Function cArray(createarray)
- This Function will push the value , which the User enter into the Array
- createarray = document.getElementById(“createArray”).value; -> Get the DOM Value enter by the User , and save it in ” createarray”
- newArray.push(createarray); -> This will push the Value createarray into the Empty Array called ” newArray “
- Create the function call e1Array() -> Method 1
- This Function will empty the Array
- Create the function call e2Array() -> Method 2
- This Function will empty the Array.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//This is a New Array
var newArray = [];
// This Fuunction Print Out the Array
function outArray() {
newArray.toString();
document.getElementById("outputArray").innerHTML = newArray;
}
// This Fuunction push the enter value into the Array
function cArray(createarray){
createarray = document.getElementById("createArray").value;
newArray.push(createarray);
alert(" After you click this button , Click<Check What inside Button >");
}
// This Fuunction will empty the Array
function e1Array(emptyarray){
newArray = [];
alert(" After you click this button , Click<Check What inside Button Again>");
}
// This Fuunction will empty the Array
function e2Array(emptyarray){
newArray.length = 0;
alert(" After you click this button , Click <Check What inside Button Again>");
}
</script>
</head>
<body>
<h2>Click the below button to see what is inside our Array Element</h2>
<P> <input type="button" value="Check what is inside" id="" onclick="outArray();"/></P>
<p id="outputArray"></p>
<P style="color:blue;"><strong>Enter an Element you want to create inside the Array :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="createArray" name="element"
placeholder="Create Array" ><input type="button" style=
"text-align:center; margin-left: 10px;" value="Create an Array" id=""
onclick="cArray(this.createarray);"/></P>
<p><input type="button" style="text-align:center; margin-left: 10px;" value="Empty Array ( Method 1)" id="" onclick="e1Array(this.emptyarray);"/> </P>
<p><input type="button" style="text-align:center; margin-left: 10px;" value="Empty Array ( Method 2)" id="" onclick="e2Array(this.emptyarray);"/> </P>
</body>
</html>
There are tonnes of library and tutorial and explanation on this site , you can check out here
check out JavaScript Bind Method Here
Leave a Reply