Web Analytics Made Easy -
StatCounter Javascript calculator not working - CodingForum

Announcement

Collapse
No announcement yet.

Javascript calculator not working

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript calculator not working

    I am just starting to learn JavaScript. I'm currently trying to get a simple calculator to work using dialogue boxes. Here's my code:

    Code:
    <script type="text/javascript">
    
    var firstNumber;
    var secondNumber;
    var number1;
    var number2;
    var sum;
    
    firstNumber = window.prompt("Enter first integer");
    
    secondNumber = window.prompt("Enter second integer");
    
    number1 = parseInt(firstNumber);
    number2 = parseInt(secondNumber);
    
    sum = number1 + number2;
    
    document.writeIn("<p>Your sum equals" + sum + "</p>");
    
    </script>
    When I open my browser, the expected dialogue boxes pop up. But after entering the integers, I'm left with a blank screen instead of the expected results. What am I doing wrong?

  • #2
    Don't use document.writeIn.
    No such command.

    Don't use document.write.
    It reloads page as soon as it is executed.

    Display answer to another element, such as in HTML
    <input type="text" id="ans" value="">

    And in JS
    document.getElementById('ans').value = sum;

    Do use the Error console (F12) to view execution errors.
    Last edited by jmrker; Sep 16, 2016, 11:03 PM.

    Comment


    • #3
      Empty reply/comment
      Last edited by Fudge; Sep 17, 2016, 12:33 AM.

      Comment


      • #4
        Originally posted by jmrker View Post
        Don't use document.writeIn.
        No such command.
        I'm learning JavaScript from a textbook, "JavaScript for Programmers" by Deitel and Deitel. They say that writeIn is a method of the document object.

        Comment


        • #5
          no suggestion from any one?? I'm waiting too

          Comment


          • #6
            It is not document.writeIn, it is document.writeln (with an l). The difference between document.write() and document.writeln() is that document.writeln() adds a line feed(new line) after each statement.

            But both document.write() and document.writeln() are both obsolete and should not be used. They have been obsolete since Netscape 3 passed away 10+ years ago. document.write() statements must be run before the page finishes loading. Any document.write() statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it).

            Follow the advice jmrker has given you.
            Last edited by Philip M; Sep 17, 2016, 03:34 AM.

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              Sounds like the book is teaching how JavaScript used to be written 20 years ago. JavaScript has changed so much since the as to effectively be a completely different language. You will need to unlearn most of what is in that book if youy want to write JavaScript for more modern browsers such as Internet Explorer Five.
              Stephen
              Learn Modern JavaScript - http://javascriptexample.net/
              Helping others to solve their computer problem at http://www.felgall.com/

              Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

              Comment


              • #8
                Originally posted by felgall View Post
                Sounds like the book is teaching how JavaScript used to be written 20 years ago . . .You will need to unlearn most of what is in that book if you want to write JavaScript for more modern browsers.
                The book is almost 7 years old. Any ideas how I can learn current, up-to-date JavaScript? Older JavaScript doesn't work on newer browsers then?

                Comment


                • #9
                  Originally posted by Fudge View Post
                  The book is almost 7 years old. Any ideas how I can learn current, up-to-date JavaScript? Older JavaScript doesn't work on newer browsers then?
                  Yes, older Javascript usually works perfectly well in newer browsers. But there are many enhancements which you ought to be aware of, as well as more modern and efficient ways of doing things. felgall is a bit of a fanatic, and rejects methods which have been superceded but which most people find work perfectly well, e.g. loops. Some things such as document.write() are very definitely obsolete, however.

                  Having said that, there are a good many Javascript commands introduced in ECMAScript2015 and ECMAScript2016 which are not yet supported by any browsers.

                  A good way to learn is from felgall's site Introducing JavaScript
                  Last edited by Philip M; Sep 17, 2016, 10:40 AM.

                  All the code given in this post has been tested and is intended to address the question asked.
                  Unless stated otherwise it is not just a demonstration.

                  Comment


                  • #10
                    Minimum changes to make it work ...

                    Code:
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                    <meta charset="UTF-8" />
                    
                    <title> HTML5 page </title>
                    
                    </head>
                    <body>
                    <input type="text" id="firstNumber" value=""><br>
                    <input type="text" id="secondNumber" value=""><br>
                    <input type="button" onclick="sum()" value="Add"><br>
                    <input type="text" id="answer" value="">
                    <script>
                    
                    function sum() {
                      var firstNumber;
                      var secondNumber;
                      var number1;
                      var number2;
                      var sum;
                    
                      firstNumber = document.getElementById('firstNumber').value;   // window.prompt("Enter first integer");
                    
                      secondNumber = document.getElementById('secondNumber').value; // secondNumber = window.prompt("Enter second integer");
                    
                      number1 = parseInt(firstNumber);
                      number2 = parseInt(secondNumber);
                    
                      sum = number1 + number2;
                    
                      document.getElementById('answer').value = sum;           // document.writeln("<p>Your sum equals" + sum + "</p>");
                    }
                    </script>
                    
                    </body>
                    </html>
                    Not the way I would do it, but at least compare the document.write version to a more current approach.

                    Comment


                    • #11
                      Then, with a few changes, you can experiment and modify for different results.

                      Code:
                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                      <meta charset="UTF-8" />
                      
                      <title> HTML5 page </title>
                      
                      </head>
                      <body>
                      <input type="text" id="firstNumber" value=""><br>
                      <input type="text" id="secondNumber" value=""><br>
                      <input type="button" onclick="calculate('+')" value="Add">
                      <input type="button" onclick="calculate('-')" value="Sub">
                      <input type="button" onclick="calculate('*')" value="Mul">
                      <input type="button" onclick="calculate('/')" value="Div">
                      <br>
                      <input type="text" id="answer" value="">
                      <script>
                      
                      function calculate(act) {
                        var firstNumber;
                        var secondNumber;
                        var number1;
                        var number2;
                        var ans;
                      
                        firstNumber = document.getElementById('firstNumber').value;   // window.prompt("Enter first integer");
                        secondNumber = document.getElementById('secondNumber').value; // secondNumber = window.prompt("Enter second integer");
                        number1 = parseInt(firstNumber);
                        number2 = parseInt(secondNumber);
                      
                        if (act == '+') { ans = number1 + number2; }
                        if (act == '-') { ans = number1 - number2; }
                        if (act == '*') { ans = number1 * number2; }
                        if (act == '/') { ans = number1 / number2; }
                      
                        document.getElementById('answer').value = ans;           // document.writeln("<p>Your sum equals" + sum + "</p>");
                      }
                      </script>
                      
                      </body>
                      </html>
                      Remember to surround your script with [ code] and [ /code] tags (without the spaces)
                      to make it easier to view your code and help maintain the formatting.

                      Continue to monitor the error console as you develop your code and check modification results.

                      Comment


                      • #12
                        Originally posted by jmrker View Post
                        Continue to monitor the error console as you develop your code and check modification results.
                        I code in Programmer's Notepad, which I don't think has an error console. Is there a JavaScript validation service available like there is for HTML?

                        Comment


                        • #13
                          All browsers have an error console so whichever browser you run the code in you will be able to check the errors.

                          For syntax checking before you run it try jslint or jshint.
                          Stephen
                          Learn Modern JavaScript - http://javascriptexample.net/
                          Helping others to solve their computer problem at http://www.felgall.com/

                          Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                          Comment


                          • #14
                            For an "Error Console" display

                            Use 'F12' in the browser and select which sections you wish displayed.

                            Or create a separate floating display when you use 'Shift-Ctrl-J'

                            Comment

                            Working...
                            X