Menu
I was wondering if there is any way to do the following!
I need to have three text boxes, user will enter a number in each box.
Then i have four buttons, add, subtract, divide and multiply.
When i click on each button, the numbers in the first two text boxes should match the answer in the third text box. ex. (first box has a 4, second box has a 4, and the third box has an 8. if i click the add button, i should get a “correct” answer in the div below with a green background and if i hit the multiply button the div should say “wrong” with a red background.
Sorry but I’m a newbie to this and this is so confusing!?
This is what i have so far.
HTML
[CODE]
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”main.js”></script>
<title>Untitled Document</title>
<style type=”text/css”>
* {margin:0; padding:0;}
h1 {color:#666;}
#wrapper {margin:auto; padding:100px; width:960px;}
#resultdiv {
width:200px;
height:50px;
border:#FFFFFF 1px solid;
color:#FFFFFF;
}
</style>
</head>
<body style=”background-color:#000000″>
<div id=”wrapper”>
<h1>Javascript</h1>
<br />
<div>
<input id=”firstnum” type=”text” size=”20″ />
<input id=”secondnum” type=”text” size=”20″ />
</div>
<br />
<div>
<input onclick=”DoNums(1)” type=”button” name=”mybutton” value=”Add Numbers” />
<input onclick=”DoNums(2)” type=”button” name=”mybutton” value=”Subtract Numbers” />
<input onclick=”DoNums(3)” type=”button” name=”mybutton” value=”Multiply Numbers” />
<input onclick=”DoNums(4)” type=”button” name=”mybutton” value=”Divide Numbers” />
</div>
<br />
<div><input id=”thirdnum” type=”text” size=”20″ /></div>
<br />
<div id=”resultdiv”><p>RESULT HERE</p></div>
</div><!– end wrapper –>
</body>
</html>
JavaScript
[CODE]
// JavaScript Document
// main.js
var right;
var wrong;
function DoNums (operations) {
var fnum = document.getElementById(“firstnum”).value;
var snum = document.getElementById(“secondnum”).value;
var tnum = document.getElementById(“thirdnum”).value;
var result = 0;
switch (operations)
{
case 1:result = parseInt (fnum) + parseInt (snum);
break;
case 2:result = parseInt (fnum) – parseInt (snum);
break;
case 3:result = parseInt (fnum) * parseInt (snum);
break;
case 4:result = parseInt (fnum) / parseInt (snum);
break;
default:alert(“invalid operation”);
break;
}
document.getElementById(“resultdiv”).innerHTML = result;
if (parseInt (tnum) == resultdiv)
{
document.getElementById(“resultdiv”).style.backgroundColor = green;
}
else
{
document.getElementById(“resultdiv”).style.backgroundColor = red;
}
}
😮