How do I make this calculator display the result on the first page after the ='s sign without destroying all of the html on the page with document.write()?
I know that document.write() is the problem, but I don't know of anything else to use. I'm very new to coding, so any help is greatly appreciated.
I also have a problem with the division part because it is putting the result right next to the remainder, however, once the document.write() problem is resolved, I think that the solution should become more apparent. Thank You!
<head>
<script language="javascript" type="text/javascript">
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.write(result);
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.write(result)
document.write(remainder)
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.write(result);
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.write(result);
}
</script>
<title>java</title>
</head>
<body>
Addition
<p>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
</p>
<p>
Subtraction
<p>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<p>Multiplication
<p>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
</p>
<p>Division
<p>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
</p>
</body>
</html>
You can either use textContent or innerHTML.
Here's an example using textContent:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').textContent = result;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').textContent = result;
document.getElementById('divide-remainder').textContent = remainder;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').textContent = result;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').textContent = result;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
With textContent you can only set text, with innerHTML you can set HTML:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').innerHTML = `<i style="color: blue">${result}</i>`;
document.getElementById('divide-remainder').innerHTML = `<i style="color: blue">${remainder}</i>`;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
It's worth noting, with innerHTML there are security concerns as mentioned here:
...there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
For that reason, it is recommended that you do not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.
Here are some other methods used to manipulate the DOM:
insertAdjacentElement
innerText
insertAdjacentHTML
insertAdjacentText
insertBefore
appendChild
replaceChild
removeChild
nodeValue
outerHTML
outerText
remove
See the full list here.
As you have discovered, document.write() is tricky because it has a tendency to overwrite the existing content when used. Let's see what the documentation has to say about it:
Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.
Hmm, well what else can we do? Fortunately, it is possible to target specific parts of the page and replace content in those elements only. So, for example we could add <span> elements with ids like #add-result, #div-result etc to the page which will contain the results of their respective action. Then, instead of using document.write() to output the results, we can replace the content in those elements.
Let's add a <span> to contain our add result:
Addition<p>
<input type="text" id="t1" name="t1" /> +
<input type="text" id="t2" name="t2" />
<input type="button" id="add" value="=" onClick="add();" />
<span id="add-result></span>
</p>
(Note: remember to close your <input /> tags with a />!)
How do we target a specific element? With document.querySelector(). Docs
Then, we can easily change the content inside of that element by updating the element.textContent property, just like you would a variable:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
// get the element with the #add-result ID
var element = document.querySelector("#add-result");
// update the content in that element
element.textContent = result;
}
Now when you add two numbers together and press =, the result will appear inside of the <span id="add-result"></span> element instead of overwriting the entire page. See if you can get it working for the other inputs as well. Remember you will need a unique id for each element you want to display a result in, and update the calculation functions accordingly!
Related
I want it to read the-number-that-has-been-computed) where the-number-that-has-been-computed is the result of the addition of the first two text boxes( I am also using window.onload that is why my script is in the head of the file.
function setUpEvents() {
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = result;
};
}
window.onload = function() {
setUpEvents();
};
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" name="b1" value="GO" onclick="add_number()">
Just remove the setUpEvents to not have the function out of scope for the inline event handler
Also remove the inline event handler
Use eventListeners instead. I changed the name to id for the button
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = "The-number-that-has-been-computed is "+ result;
};
window.addEventListener("load", function() {
document.getElementById("b1").addEventListener("click", add_number);
});
input { width: 300px }
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" id="b1" value="GO" />
Seeking assistance with creating add and subtract buttons within a form to add and remove amount of a line of stock.
Similar to:
I'm new to html and very new to javascript.
function minus(){
var bCount = parseInt(document.calculateCart.count.value);
var count = bCount--;
document.calculateCart.count.value = count;
}
function minus(){
var bCount = parseInt(document.calculateCart.count.value);
var count = bCount++;
document.calculateCart.bCount.value = count;
}
<div class="productForm">
<form name="calculateCart" action="#">
<div class="+-Buttons">
Quantity <br>
<input type="button" value="-" onClick="minus()">
<input type="int" name="count" value=0>
<input type="button" value="+" onClick="add()">
</div>
</form>
</div>
If you want to chane your number using buttons and using text-input, you can change your code to that:
<div class="productForm">
<form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
<div class="+-Buttons">
Quantity <br>
<input type="button" value="-" onClick="minus()">
<input type="number" name="count" value=0>
<input type="button" value="+" onClick="add()">
</div>
</form>
</div>
<script>
function minus(){
document.calculateCart.count.value = --document.calculateCart.count.value;
}
function add(){
document.calculateCart.count.value = ++document.calculateCart.count.value;
}
</script>
In HTML don't exist type of input - int, you need to use number or text.
If you want change value only using the buttons, you can make it like this:
<div class="productForm">
<form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
<div class="+-Buttons">
Quantity <br>
<input type="button" value="-" onClick="minus()">
<span id="your-number">0</span>
<input type="button" value="+" onClick="add()">
</div>
</form>
</div>
<script>
var a = 0;
function minus(){
a -= 1;
document.getElementById('your-number').innerHTML = a;
}
function add(){
a += 1;
document.getElementById('your-number').innerHTML = a;
}
</script>
Your both functions are named 'minus'. One of them (the second one) should be 'add'.
you have s sort of a typo in your code: your function for adding valus is called minus(). So you have two functions with the same name
I believe you are getting the value of count in a wrong way. You should assign an id to the input and use getElementById
working code:
function minus(){
var bCount = document.getElementById('count').value;
bCount--;
document.getElementById('count').value = bCount;
document.getElementById('count');
}
function add(){
var bCount = document.getElementById('count').value;
bCount++;
document.getElementById('count').value = bCount;
document.getElementById('count');
}
<div class="productForm">
<form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
<div class="+-Buttons">
Quantity <br>
<input type="button" value="-" onClick="minus()">
<input type="int" name="count" id="count" value=0>
<input type="button" value="+" onClick="add()">
</div>
</form>
</div>
You need to use document.getElementById in order to get old textbox value.
Please check below code:
function minus(){
var oldVal = parseInt(document.getElementById("myVal").value);
oldVal--;
document.getElementById("myVal").value = oldVal;
}
function add(){
var oldVal = parseInt(document.getElementById("myVal").value);
oldVal++;
document.getElementById("myVal").value = oldVal;
}
<div class="productForm">
<form name="calculateCart" action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php">
<div class="+-Buttons">
Quantity <br>
<input type="button" value="-" onClick="minus()">
<input type="text" id="myVal" name="count" value="0">
<input type="button" value="+" onClick="add()">
</div>
</form>
</div>
you have two function minus, one of them must be add
if you want use attributre name to select, you need to use something look like:
document.getElementsByName("count")[0].tagName
Write a script that inputs an integer code for a character and displays the corresponding character.
It should print in a paragraph.
function character() {
var input = document.getElementById( "input" );
var code = document.getElementById( "output" ).innerHTML = input;
output.value = String.fromCharCode( code );
}
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
A P is not a form element. Also if you use form.fieldName, you need to use name="" instead of id=""; otherwise use document.getElementById for all fields and ignore the form.
You need to use innerHTML or innerText/textContent for a paragraph
document.getElementById("output").innerHTML=...
function character() {
var form = document.getElementById("form");
var code = parseInt(form.input.value,10); // radix 10 to make decimal
document.getElementById("output").innerHTML = String.fromCharCode(code);
}
<form id="form">
<input name="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
You have the problem for access to the elements inside a form.
document.getElementById("form").elements['input']
But this only works with form elements, not with other HTML elements.
In this of elements, you can use id or name but for historical reasons.
You have another way here:
function character() {
var input = document.getElementById("input"),
output = document.getElementById("output");
output.innerHTML = String.fromCharCode(parseInt(input.value), 10) || '';
}
<form id="form">
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
Here, this works:
<script>
function character() {
var ChrCode = document.getElementById("input").value;
document.getElementById("output").innerText = ChrCode + " = " + String.fromCharCode(ChrCode);
//output.value = String.fromCharCode( code );
}
</script>
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" >Output</p>
sir
i have 7 text boxes .1st two take values from user and display the multiplication result on 3rd text box when it clicked.4th and 5th textboxes also take values and display the multiplication result in 6th text box when it clicked.now 7th textbox will display the addition result when it clicked.7th textbox takes the values from 3rd and 6th textbox.
my problem is that i can not do the addition and cant display the result in 7th text box in html and jscript.plz help me.....i am attached the code...
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt1(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt').value = gt1;
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt1()" id="gt1"/>
</form>
</html>
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt1').value = gt1;
}
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt()" id="gt1"/>
</form>
</html>
use this code it is working. and compare with own code. thanks..
There are several problem
1). Element id is one line is incorrect. It should be:
document.getElementById('gt1').value = gt1;
2). result variable is undefined. It should be:
if (!isNaN(gt1))
3). onclick="gt1()" will not work (because there is id with the same name gt1). Use, for example:
function getText3() { ... }
and
<input type="text" onclick="getText3()" id="gt1"/>
Fiddle.
Update. Ok, I didn't notice that you want multiplication, but somewhy had written + in getText1() and getText2() functions. Then you should also replace these two + with *:
Multiplication fiddle.
You dont have element with id 'gt'.
Change last line of code to this:
document.getElementById('gt1').value = gt1;
You have not defined 'result' variable
and in 'gt1()' :
document.getElementById('gt').value = gt1;
1- There is no 'gt' element in the page
2- 'gt1' should renamed to 'result'
and at the end code will be:
<script language="javascript" type="text/javascript">
function getText1() {
var in1 = document.getElementById('in1').value;
var in2 = document.getElementById('in2').value;
var tot1 = parseInt(in1) + parseInt(in2);
document.getElementById('tot1').value = tot1;
}
function getText2() {
var in1 = document.getElementById('in3').value;
var in2 = document.getElementById('in4').value;
var tot2 = parseInt(in1) + parseInt(in2);
document.getElementById('tot2').value = tot2;
}
function gt1() {
var in1 = document.getElementById('tot1').value;
var in2 = document.getElementById('tot2').value;
var result = parseInt(in1) + parseInt(in2);
if (!isNaN(result)) {
document.getElementById('gt1').value = result;
}
//document.getElementById('gt1').value=gt1;
}
</script>
this is work properly.
Check the below code.
<script >
function getext3(){
txt1 = document.getElementById("text1").value;
txt2 = document.getElementById("text2").value;
document.getElementById("text3").value = parseInt(txt1)*parseInt(txt2);
}
function getext6(){
txt1 = document.getElementById("text4").value;
txt2 = document.getElementById("text5").value;
document.getElementById("text6").value = parseInt(txt1)*parseInt(txt2);
}
function getext7(){
txt1 = document.getElementById("text3").value;
txt2 = document.getElementById("text6").value;
document.getElementById("text7").value = parseInt(txt1)+parseInt(txt2);
}
</script>
Text1 : <input type="text" id="text1" value="5"> <br/>
Text2 : <input type="text" id="text2" value="2"> <br/>
Text3 : <input type="text" id="text3" value="" onclick="getext3()"> <br/>
Text4 : <input type="text" id="text4" value="7"> <br/>
Text5 : <input type="text" id="text5" value="10"> <br/>
Text6 : <input type="text" id="text6" value="" onclick="getext6()"> <br/>
Text7 : <input type="text" id="text7" value="" onclick="getext7()"> <br/>
I want to be able to add multiple rows to a div and also removing them. I have a '+' button at the top of the page which is for adding content. Then to the right of every row there is a '-' button that's for removing that very row. I just can't figure out the javascript code in this example.
This is my basic HTML structure:
<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>
This is what I want to add inside the content div:
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow()">
You can do something like this.
function addRow() {
const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label>
<input type="checkbox" name="check" value="1" /> Checked?
</label>
<input type="button" value="-" onclick="removeRow(this)" />
`;
document.getElementById('content').appendChild(div);
}
function removeRow(input) {
document.getElementById('content').removeChild(input.parentNode);
}
To my most biggest surprise I present to you a DOM method I've never used before googeling this question and finding ancient insertAdjacentHTML on MDN (see CanIUse?insertAdjacentHTML for a pretty green compatibility table).
So using it you would write
function addRow () {
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="row">
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function removeRow (input) {
input.parentNode.remove()
}
<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>
Another solution is to use getDocumentById and insertAdjacentHTML.
Code:
function addRow() {
const div = document.getElementById('content');
div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');
}
Check here, for more details:
Element.insertAdjacentHTML()
I know it took too long, it means you can write more briefly.
function addRow() {
var inputName, inputValue, label, checkBox, checked, inputDecrease, content, Ptag;
// div
content = document.getElementById('content');
// P tag
Ptag = document.createElement('p');
// first input
inputName = document.createElement('input');
inputName.type = 'text';
inputName.name = 'name';
// Second input
inputValue = document.createElement('input');
inputValue.type = 'text';
inputValue.name = 'Value';
// Label
label = document.createElement('label');
// checkBox
checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.name = 'check';
checkBox.value = '1';
// Checked?
checked = document.createTextNode('Checked?');
// inputDecrease
inputDecrease = document.createElement('input');
inputDecrease.type = 'button';
inputDecrease.value = '-';
inputDecrease.setAttribute('onclick', 'removeRow(this)')
// Put in each other
label.appendChild(checkBox);
label.appendChild(checked);
Ptag.appendChild(inputName);
Ptag.appendChild(inputValue);
Ptag.appendChild(label);
Ptag.appendChild(inputDecrease);
content.appendChild(Ptag);
}
function removeRow(input) {
input.parentNode.remove()
}
* {
margin: 3px 5px;
}
<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>
You can use this function to add an child to a DOM element.
function addElement(parentId, elementTag, elementId, html)
{
// Adds an element to the document
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}
function removeElement(elementId)
{
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
To remove node you can try this solution it helped me.
var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
Add HTML inside div using JavaScript
Syntax:
element.innerHTML += "additional HTML code"
or
element.innerHTML = element.innerHTML + "additional HTML code"
Remove HTML inside div using JavaScript
elementChild.remove();
make a class for that button lets say :
`<input type="button" value="+" class="b1" onclick="addRow()">`
your js should look like this :
$(document).ready(function(){
$('.b1').click(function(){
$('div').append('<input type="text"..etc ');
});
});
please try following to generate
function addRow()
{
var e1 = document.createElement("input");
e1.type = "text";
e1.name = "name1";
var cont = document.getElementById("content")
cont.appendChild(e1);
}
<!DOCTYPE html>
<html>
<head>
<title>Dynamical Add/Remove Text Box</title>
<script language="javascript">
localStorage.i = Number(1);
function myevent(action)
{
var i = Number(localStorage.i);
var div = document.createElement('div');
if(action.id == "add")
{
localStorage.i = Number(localStorage.i) + Number(1);
var id = i;
div.id = id;
div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';
document.getElementById('AddDel').appendChild(div);
}
else
{
var element = document.getElementById(action.id);
element.parentNode.removeChild(element);
}
}
</script>
</head>
<body>
<fieldset>
<legend>Dynamical Add / Remove Text Box</legend>
<form>
<div id="AddDel">
Default TextBox:
<input type="text" name="default_tb">
<input type="button" id="add" onclick="myevent(this)" value="Add" />
</div>
<input type="button" type="submit" value="Submit Data" />
</form>
</fieldset>
</body>
</html>