SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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!

    This is what i have so far.
    HTML
    Code HTML4Strict:
    <!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
    Code 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;
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unstable_nes View Post
    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.
    It sounds like quite the assignment.

    What in particular would you like to know more about?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unstable_nes View Post
    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.
    That sounds appropriate. Go for it
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

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

    HTML

    Code HTML4Strict:
    <!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

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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unstable_nes View Post
    I tried this but got nothing. Im not sure what im missing.
    Could it be that the code that checks the result and colors the third field, is outside of the function?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried putting it inside the function and its not working. Confused!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unstable_nes View Post
    I tried putting it inside the function and its not working. Confused!
    What are you doing here?

    Code:
    if (parseInt (tnum) == "resultdiv")
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the code wrong? I'm trying to match the answer in both the resultdiv and tnum text field.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unstable_nes View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Appreciate the help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •