Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with javascript code

    Hey everyone, I'm brand new to coding and am working through a textbook I got online to learn. I just recently read about IF and SWITCH functions and I'm trying to work on a problem in the book. I'm suppose to create an HTML that allows someone to input a math formula using "+, -, * or /" and try and get the correct answer. If the answer is correct it needs to say "Correct!" otherwise it should say "Incorrect. Try again!".
    Right now I'm extremely stuck since my button doesn't actually do anything when I click it. Could anyone help me?

    Code:
    <!DOCTYPE HTML>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>Test your math skills!</title>
    
    <script type="text/javascript">
    /* Input: Two numbers and operator
     * Processing: Determines the solution and displays if correct or incorrect
     * Output: Solution and correct/incorrect message
     */
    
    function testMath() {
       var num1 = parseInt(document.getElementById('num1InputBox').value);
       var num2 = parseInt(document.getElementById('num2InputBox').value);
       var operator = document.getElementById('operatorInputBox').value;
       var testResult;
          switch (operator) {
            case '+':
                testResult = num1 + num2;
                break;
            case '-':
                testResult = num1 - num2;
                break;
            case '*':
                testResult = num1 * num2;
                break;
            case '/':
                testResult = num1 / num2;
                break;
            default:
                testResult = "invalid";
                window.alert("Please enter +, -, * or / in middle box");
                break;
        }
        document.getElementById('outputDiv').innerHTML = testResult;
    }
    
    function testAnswer(testResult) {
       var answer = document.getElementById('answerInputBox').value;
       var response;
       
          if (testResult != answer) {
             response = “Incorrect. Try again!”;
       }
          else {
             response = "Correct!";
       }
    }
    
    
    </script>
    </head>
    
    <body>
    <font size="6"><strong>Test your math skills!</strong></font> 
    <br> 
    <br>
    <input type="text" style="width: 80px" id="num1InputBox">
    <input type="text" style="width: 20px" id="operatorInputBox">
    <input type="text" style="width: 80px" id="num2InputBox"> 
    <font size="5"> = </font>
    <input type="text" style="width: 80px" id="answerInputBox"> 
    <div id="outputDiv">
    </div>
    <button type="button" onclick="testAnswer()">Check</button>
    </body>
    </html>

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,715
    Thanks
    58
    Thanked 668 Times in 663 Posts
    The first thing I would be looking at would be which function is called when your button is clicked.

    From there, follow the logic of your code and see what the inevitable result is.

  3. #3
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shouldn't it be the testAnswer function? Because the testAnswer function calls the testResult function and determines if it's right or wrong. I've tried putting the other function in but doesn't do anything for me either. The book is really unclear on how to use multiple functions.

  4. #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,866
    Thanks
    64
    Thanked 593 Times in 587 Posts
    Also note what the error console says about these lines...
    Code:
          if (testResult != answer) {
             response = “Incorrect. Try again!”;
       }
    Compare it to some of your other condition tests.

  5. #5
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Also note what the error console says about these lines...
    Code:
          if (testResult != answer) {
             response = “Incorrect. Try again!”;
       }
    Compare it to some of your other condition tests.
    So I looked at the error console and switched a few things. Fixed the equation you were talking about to use single quotes instead of double. Then I switched the outputDiv to the "response" variable.
    However, now it only displays incorrect whenever I do the equation correct so I'm guessing it's not calling the other function correctly.
    Did I pass the parameter correctly? There is no errors in the console log either.


    Code:
    <!DOCTYPE HTML>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>Test your math skills!</title>
    
    <script type="text/javascript">
    /* Input: Two numbers and operator
     * Processing: Determines the solution and displays if correct or incorrect
     * Output: Solution and correct/incorrect message
     */
    
    function testMath() {
       var num1 = parseInt(document.getElementById('num1InputBox').value);
       var num2 = parseInt(document.getElementById('num2InputBox').value);
       var operator = document.getElementById('operatorInputBox').value;
       var testResult;
          switch (operator) {
            case '+':
                testResult = num1 + num2;
                break;
            case '-':
                testResult = num1 - num2;
                break;
            case '*':
                testResult = num1 * num2;
                break;
            case '/':
                testResult = num1 / num2;
                break;
            default:
                testResult = "invalid";
                window.alert("Please enter +, -, * or / in middle box");
                break;
        }
    }
    
    function testAnswer(testResult) {
       var answer = document.getElementById('answerInputBox').value;
       var response;
       
          if (testResult != answer) {
             response = 'Incorrect. Try again!';
       }
          else {
             response = 'Correct!';
       }
        document.getElementById('outputDiv').innerHTML = response;
    }
    
    
    </script>
    </head>
    
    <body>
    <font size="6"><strong>Test your math skills!</strong></font> 
    <br> 
    <br>
    <input type="text" style="width: 80px" id="num1InputBox">
    <input type="text" style="width: 20px" id="operatorInputBox">
    <input type="text" style="width: 80px" id="num2InputBox"> 
    <font size="5"> = </font>
    <input type="text" style="width: 80px" id="answerInputBox"> 
    <div id="outputDiv">
    </div>
    <br>
    <br>
    <button type="button" onclick="testAnswer()">Check</button>
    </body>
    </html>

  6. #6
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    5,596
    Thanks
    24
    Thanked 573 Times in 566 Posts
    Did I pass the parameter correctly?
    How many parameters does the testAnswer() function expect and how many do you actually pass?

    Note: the <font> tag is deprecated for decades now. either style with CSS or not at all.
    Note: the width of a text box can also be limited using the size attribute (works esp. well when the box' font is set to monospace).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  7. #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,715
    Thanks
    58
    Thanked 668 Times in 663 Posts
    Quote Originally Posted by Carnoux View Post
    The testAnswer function calls the testResult function
    Where?

  8. #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,866
    Thanks
    64
    Thanked 593 Times in 587 Posts
    Note:
    1. You call a function
    Code:
    <button type="button" onclick="testAnswer()">Check</button>
    without a parameter, but the called function

    2. is expecting a parameter.
    Code:
    function testAnswer(testResult) {
    3. but that is OK, because you never use the parameter in the function anyway.

    Follow the sequence and decide what you want to do.

    4. You create a function.
    Code:
    function testMath() {
    but as far as I can tell, you never use it.

    Can you see why you are getting the same displays now?

    Instead of "test..." this and "test..." that, why not call the functions with a name that actually describes what you are really trying to do?

  9. #9
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    5,596
    Thanks
    24
    Thanked 573 Times in 566 Posts
    Quote Originally Posted by jmrker View Post
    3. but that is OK, because you never use the parameter in the function anyway.
    He uses it in the if() condition, though ...
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  10. #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,866
    Thanks
    64
    Thanked 593 Times in 587 Posts
    Quote Originally Posted by Dormilich View Post
    He uses it in the if() condition, though ...
    True, it is tested in the "testAnswer" function
    but is is not passed any values in the calling event
    Code:
    <button type="button" onclick="testAnswer()">Check</button>

  11. #11
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    5,596
    Thanks
    24
    Thanked 573 Times in 566 Posts
    That was what I was referring to in post #6.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


 

Tags for this Thread

Posting Permissions

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