Need help! Can this be done? Tricky JavaScript?!?!?!?

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!:confused:

This is what i have so far.:shifty:
HTML


<!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;}
#resultdiv {}
</style>
</head>

<body style="background-color:#000066">

<div>
<input id="firstnum" type="text" size="20" />
<input id="secondnum" type="text" size="20" />
<input id="thirdnum" 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 id="resultdiv" style=" background-color:#CCCCCC">RESULT HERE</div>
</body>
</html>

JavaScript


// JavaScript Document
// main.js

function DoNums (operations) {
	
	var fnum = document.getElementById("firstnum").value;
	var snum = document.getElementById("secondnum").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;
}

It sounds like quite the assignment.

What in particular would you like to know more about?

Hey, thanks for responding. If the first two numbers add up the third number, then the answer should read correct or wrong in the result div. I’m thinking to use an “if” statement. Ex. If fnum + snum == thirdnum, then display “correct” in the “resultdiv” with green background else display “wrong” with red background if incorrect.

Thanks in advance.:smiley:

That sounds appropriate. Go for it :tup:

I tried this but got nothing. Im not sure what im missing.:confused:

HTML


<!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;
	}
#resultdiv p {
	margin:auto;	
}
</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" />
<input id="thirdnum" 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 id="resultdiv"><p>RESULT HERE</p></div>

</div><!-- end wrapper -->
</body>
</html>

JavaScript


// 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;
	}

Could it be that the code that checks the result and colors the third field, is outside of the function?

I tried putting it inside the function and its not working. Confused!

What are you doing here?


if (parseInt (tnum) == "resultdiv")

Is the code wrong? I’m trying to match the answer in both the resultdiv and tnum text field.

It is. Currently you’re comparing tnum with a string, when instead you want to be comparing it with the contents of the resultdiv.

There is another variable that is just recently been assigned to the resultdiv, isn’t there.

Thanks Paul! Appreciate the help.