Create a new object on click JavaScript
Create a new Object on Click Javascript . In this Article i will show you how to create a new Object by clicking a Button. After that i will push the newly created Object into an Array. Finally i will demonstrate how to delete the Object from the Array as well.
In this Javascript Sample Code i will Create 3 function
- cClone() -> Use to create the Object and push the Created object into the Array
- outArray() -> This Function will loop through the Array and Object to print out all the assets contain inside the Object
- tObject() -> This Function will remove the Object inside the Array
To Create This Sample Code, i will need few things Setup in HTML
- ” Number of Clone ” Button for the User to view all objects contain inside the Array
- 3 text Boxes ( Clone Name , Serial Number, Gender )
- ” Create Clone ” Button , to create the Object
- A Terminate text box for the User to input the ” clone Number”
- A ” terminate ” Button to delete the Object from the Array.
The How To Create a new object on click JavaScript Application is as Below
Start Cloning
Clone Name :
Serial Number :
Gender :
Terminate :
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.
- allBots.toString(); , convert the User inputted Array into String
- displayArrayObjects(arrayObjects) -> This Function will initially loop through every single element in the ” allBots ” Array -> inside the allBot [i] index, the function will loop through every single element contain inside the Object
- Finally the function will print out all Array / Object Elements
- var robots ={} is the base object , it contain 4 element inside ( ” name, cloneNumber ,serialNumber, Gender “) with default value being assigned.
- 2 Array Variable being declared (1) allBots[] to contain all the Object created (2) clBot[] for newly instantiated Object
- function cClone() -> first the function will get all the Input from the User Text Box assign to these Variable ( “c_Name”,”s_Num”, “c_Gen” )
- Then Check the Array Length and assign the array length to ” clArray “.
- Use “Object.create(robots); ” to instantiate a new instant
- Assign the User Input Value Name( “c_Name”,”s_Num”, “c_Gen” ) into the newly created instant
- Push the newly created instant into allBots Array . “allBots.push(clbot[clArray]); “
- Check the array Length again
- If the New Array Length is more than the Previous Array Length , clear the User Text Box
- tObject()
- Get the User inputted ” cloneNumber ” and assign the value to “d_Name”
- “allBots.splice( d_Name, 1);” -> Means replace 1 object in “d_Name ” Index
- Finally Loop Through the Array / Object to Update the new ” cloneNumber “
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//This is a New Array
var allBots = [];
var clbot =[];
var c_Name = "";
var s_Num =0;
var c_Gen ="";
var clArray = 0;
var clArrays = 0;
var clNumb =0;
var d_Name = 0;
var afDel =0;
var robots = {
//Default Maker
//Default Serial Number
name: 'tBot',
cloneNumber: 0,
serialNumber: 8888 ,
gender : 'xxx'
};
function cClone(){
// First get the Data from the User Text Box genderN
c_Name = document.getElementById("cloneN").value;
s_Num = document.getElementById("serialN").value;
c_Gen = document.getElementById("genderN").value;
// then Check the Array Length
clArray = clbot.length;
clArray = clArray ;
// new Array length
clbot[clArray] = Object.create(robots);
clbot[clArray].name = c_Name ;
clbot[clArray].cloneNumber = clArray ;
clbot[clArray].serialNumber = s_Num ;
clbot[clArray].gender = c_Gen ;
allBots.push(clbot[clArray]);
clArrays = clbot.length;
if(clArrays > clArray ){
document.getElementById("cloneN").value="";
document.getElementById("serialN").value="";
document.getElementById("genderN").value="";
document.getElementById("outputArray").innerHTML = "";
}
}
// This Function Print Out the Array
function outArray() {
allBots.toString();
function displayArrayObjects(arrayObjects) {
// First Check the Array Length
var len = arrayObjects.length, text = "";
//Loop through the Array
for (var i = 0; i < len; i++) {
var myObject = arrayObjects[i];
//Loop through the object in side the array
for (var x in myObject) {
text += ( x + ": " + myObject[x] + " ");
}
text += "<br/>";
}
document.getElementById("outputArray").innerHTML = text;
}
displayArrayObjects(allBots);
}
function tObject(){
// Delete Clone
// Get the Number you wanna Delecte
d_Name = document.getElementById("terminateN").value;
// find the index value
allBots.splice( d_Name, 1);
// after delete Update the clone Number
// First Check the Array Length
var lent = allBots.length;
//Loop through the Array
for (var i = 0; i < lent; i++) {
//Loop through the object in side the array
allBots[i].cloneNumber =i;
}
document.getElementById("outputArray").innerHTML = "";
}
</script>
</head>
<body>
<h2>Start Cloning</h2>
<P> <input type="button" value="Number Of Clone" id="" onclick="outArray();"/></P>
<p id="outputArray"></p>
<P style="color:blue;"><strong>Clone Name :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="cloneN" name="element"
placeholder="Clone Name" >
</P>
<P style="color:blue;"><strong>Serial Number :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="serialN" name="element"
placeholder="Serial Number" >
</P>
<P style="color:blue;"><strong>Gender :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="genderN" name="element"
placeholder="Gender" >
</P>
<input type="button" style=
"text-align:center; margin-left: 10px;" value="Create Clone" id=""
onclick="cClone();"/></P>
<P style="color:blue;"><strong>Terminate :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="terminateN" name="element"
placeholder="Enter Clone Number :" ><input type="button" style="text-align:center; margin-left: 10px;" value="Terminate" id="" onclick="tObject();"/>
</P>
<p> </P>
</body>
</html>
Check out Object in Javascript here
Leave a Reply