/    Sign up×
Community /Pin to ProfileBookmark

calculator in javascript

Hi all master and expert coders

I am working on a calculator which using the instructor’s codes from the school. The problem that I having right now is the operator. I have successfully complete only the addition, but could not manage on subtraction and the rest operator. I hope experienced codes would help me out on this. Below is my codes.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<script type=”text/javascript”>
function calculate() {
var value1 = parseInt(validate(document.getElementById(“value1”).value));
var value2 = parseInt(validate(document.getElementById(“value2”).value));
radioButtonCheck();
checkboxCheck();
dropDownListCheck();
document.getElementById(“result”).value = addition(value1, value2);
document.getElementById(“result”).value = subtraction(value1, value2);
document.getElementById(“result”).value = multiplication(value1, value2);
document.getElementById(“result”).value = division(value1, value2);

}

function validate(value) {
if (value == null || value == “”) {
alert(“Required Field”);
return 0;
} else if (isNaN(value)) {
alert(“Must be a number”);
return 0;
}
else return value;
}

function addition(value1, value2){
return value1 + value2;
}

[COLOR=”Red”]// trying to use the same addition return statement but fail. [/COLOR]
function radioButtonCheck() {
if ((document.getElementById(“radio1”).checked == false)
&& (document.getElemtById(“radio2”).checked == false)) {
alert(“Please select a radio button”);
valid = false;
}
}
function checkboxCheck() {
if ((document.getElementById(“cbox1”).checked == false)
&& (document.getElementById(“cbox2”).checked == false)) {
alert(“Please select a checkbox”);
valid = false;
}
}
function dropDownListCheck() {
if ((document.getElementById(“ddlOperator”).selectedIndex == 0)) {
alert(“Please select a operator”);
valid = false;
}
}

</script>

<title>Calculator By Alsus</title>

</head>
<body>
<h2>Calculator</h2>
<table border = “1”>
<tr>
<td>Value 1:</td>
<td><input type=”text” id=”value1″ name=”value1″ /></td>
</tr>
<tr>
<td>Value 2:</td>
<td><input type=”text” id=”value2″ name=”value2″ /></td>
</tr>
<tr>
<td>Operator:</td>
<td><input type=”text” id=”Operator” name=”Operator” /></td>
</tr>
<tr>
<td><input type=”radio” id=”radio1″ name=”radio1″ value=”radio1″ />Radio1<br /></td>
<td><input type=”radio” id=”radio2″ name=”radio2″ value=”radio2″ />Radio2<br /></td>
</tr>
<tr>
<td><input type=”checkbox” id=”cbox1″ name=”cbox1″ value=”cbox1″ />Checkbox 1<br /></td>
<td><input type=”checkbox” id=”cbox2″ name=”cbox2″ value=”cbox2″ />Checkbox 2<br /></td>
</tr>
<tr>
<td>
<select id=”ddlSelect”>
<option value=”+”>+</option>
<option value=”-“>-</option>
<option value=”*“>*</option>
<option value=”/”>/</option>
</select>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Result:</td>
<td><input type=”text” id=”result” name=”result” /></td>
</tr>
</table>
<input type=”submit” id=”btn_sub” name=”btn_sub” value=”Submit” onclick=”calculate()” />
<input type=”reset” id=”btn_res” name=”btn_res” value=”Reset” />
</body>
</html>

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJan 22.2012 — So, to begin with, where are the subtraction, multiplication and division functions defined?

Keep in mind that function pass parameters as strings. You will need to convert the strings to numbers using N = Number(str) or something similar, like N = str * 1 to convert to a number

for the addition function rather that the default action of concatenation for the '+' symbol.

BTW, you should enclose you script between [ code] and [ /code] tags (without the spaces)

to make it easier to view, copy and test your attempts.
Copy linkTweet thisAlerts:
@suncabalauthorJan 22.2012 — can you test my codes, and let me know

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<script type="text/javascript">

function calculate() {

var value1 = parseInt(validate(document.getElementById("value1").value));

var value2 = parseInt(validate(document.getElementById("value2").value));

radioButtonCheck();

checkboxCheck();

dropDownListCheck();

document.getElementById("result").value = addition(value1, value2);

document.getElementById("result").value = subtraction(value1, value2);

document.getElementById("result").value = multiplication(value1, value2);

document.getElementById("result").value = division(value1, value2);

}

function validate(value) {

if (value == null || value == "") {

alert("Required Field");

return 0;

} else if (isNaN(value)) {

alert("Must be a number");

return 0;

}

else return value;

}

function addition(value1, value2){

return value1 + value2;

}

function subtraction(value1, value2){

return value1 - vaue2; [COLOR="Red"]// function of subtraction[/COLOR]

}

function multiplication(value1, value2){

return value1 * vaue2; [COLOR="Red"]// function of multi[/COLOR]

}

function division(value1, value2){

return value1 / vaue2; [COLOR="Red"]// function of division[/COLOR]

}

function radioButtonCheck() {

if ((document.getElementById("radio1").checked == false)

&& (document.getElemtById("radio2").checked == false)) {

alert("Please select a radio button");

valid = false;

}

}

function checkboxCheck() {

if ((document.getElementById("cbox1").checked == false)

&& (document.getElementById("cbox2").checked == false)) {

alert("Please select a checkbox");

valid = false;

}

}

function dropDownListCheck() {

if ((document.getElementById("ddlOperator").selectedIndex == 0)) {

alert("Please select a operator");

valid = false;

}

}

</script>

<title>Calculator By Alsus</title>

</head>

<body>

<h2>Calculator</h2>

<table border = "1">

<tr>

<td>Value 1:</td>

<td><input type="text" id="value1" name="value1" /></td>

</tr>

<tr>

<td>Value 2:</td>

<td><input type="text" id="value2" name="value2" /></td>

</tr>

<tr>

<td>Operator:</td>

<td><input type="text" id="Operator" name="Operator" /></td>

</tr>

<tr>

<td><input type="radio" id="radio1" name="radio1" value="radio1" />Radio1<br /></td>

<td><input type="radio" id="radio2" name="radio2" value="radio2" />Radio2<br /></td>

</tr>

<tr>

<td><input type="checkbox" id="cbox1" name="cbox1" value="cbox1" />Checkbox 1<br /></td>

<td><input type="checkbox" id="cbox2" name="cbox2" value="cbox2" />Checkbox 2<br /></td>

</tr>

<tr>

<td>

<select id="ddlSelect">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>Result:</td>

<td><input type="text" id="result" name="result" /></td>

</tr>

</table>

<input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" />

<input type="reset" id="btn_res" name="btn_res" value="Reset" />

</body>

</html>
Copy linkTweet thisAlerts:
@JMRKERJan 23.2012 — Well, it doesn't work, but you should be able to test that better than me. :eek:

Also, I don't understand what all the radio buttons and checkboxes are supposed to do? ?

What is supposed to be put into the operator box when you already have a drop-down box with operators? ?
×

Success!

Help @suncabal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...