Menu
1) How do I run a script without the page reloading and losing the values?
2) How can I use Javascript to get text from a textarea in a form?
Here’s my HTML
[code=html]<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<title>JavaScript Calculator</title>
<link type=”text/css” rel=”stylesheet” href=”./Calculator.css” />
</head>
<body>
<h1>Javascripted Calculator</h1>
<form action=”./Calculator.xhtml” id=”Calculator” method=”post”>
<fieldset id=”Numbers”>
<legend>Enter Values Here</legend>
<ul>
<li id=”Number1″><label>First Number:</label><input type=”text” id=”Value1″ /></li>
<li id=”Number2″><label>Second Number:</label><input type=”text” id=”Value2″ /></li>
</ul>
</fieldset>
<fieldset id=”Operations”>
<legend>Choose Operation</legend>
<ul>
<li id=”Add”><button>+</button></li>
<li id=”Sub”><button>-</button></li>
<li id=”Mul”><button>*</button></li>
<li id=”Div”><button>/</button></li>
</ul>
</fieldset>
<div id=”Result” />
</form>
<script type=”text/javascript” src=”Calculator.js” />
</body>
</html>
Here’s my Javascript.
[code=php]document.getElementById(‘Add’).getElementsByTagName(‘button’)[0].onclick = function(){Calculate(‘Add’);}
document.getElementById(‘Sub’).getElementsByTagName(‘button’)[0].onclick = function(){Calculate(‘Sub’);}
document.getElementById(‘Mul’).getElementsByTagName(‘button’)[0].onclick = function(){Calculate(‘Mul’);}
document.getElementById(‘Div’).getElementsByTagName(‘button’)[0].onclick = function(){Calculate(‘Div’);}
function Calculate(Operation){
Op = Operation;
var Num1 = document.getElementById(‘Value1’).data;
var Num2 = document.getElementById(‘Value2’).data;
var Num3;
switch (Op){
case ‘Add’:
Num3 = Num1 + Num2;
break;
case ‘Sub’:
Num3 = Num1 – Num2;
break;
case ‘Mul’:
Num3 = Num1 * Num2;
break;
case ‘Div’:
Num3 = Num1 / Num2;
break;
}
document.getElementById(‘Result’).appendChild(document.createTextNode(Num3));
}