Web Analytics Made Easy -
StatCounter Perform Calculation Events in JS - CodingForum

Announcement

Collapse
No announcement yet.

Perform Calculation Events in JS

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

  • Perform Calculation Events in JS

    Hi,
    The user is supposed to input any two Numbers in the two textfields, and hit "multiply" button. I tried to make use of functions to achieve this.
    However, it does not work. Please advise where I am going wrong.

    HTML
    Code:
    <form>
      3rd Number :
      <input type="text" id="thirdNumber" />
      <br>
      4th Number:
      <input type="text" id="fourthNumber" />
      <input type="button" onClick="myFunction()" Value="Multiply" />
    <p>Show my Result:<div id="solution"> </div></p>
    
    
    </form>
    JS
    Code:
    var num3= Number ('num3');
    var num4= Number ('num4');
    
    
    function myFunction(num3, num4){
    	return num3*num4;
    }
    
    document.getElementById("solution").innerHTML = myFunction(num3, num4);

  • #2
    Try this

    Code:
    <form>
      <label for="thirdNumber">3rd Number :</label>
      <input type="text" id="thirdNumber" />
      <br>
      <label for="fourthNumber">4th Number:</label>
      <input type="text" id="fourthNumber" />
      <input type="button" id="mult" value="Multiply" />
    <p>Show my Result:<span id="solution"> </span></p>
    </form><script>
    function myFunction() {
      var num3 = document.getElementById('thirdNumber').value;
      var num4 = document.getElementById('fourthNumber').value;
      document.getElementById('solution').innerHTML = num3 * num4;                                  
    }  
    document.getElementById('mult').addEventListener('click',myFunction,false);
      </script>
    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


    • #3
      Unfortunately the above code does not work.

      Comment


      • #4
        Originally posted by uxk8396 View Post
        Unfortunately the above code does not work.
        It works just fine for me.

        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


        • #5
          Originally posted by uxk8396 View Post
          Unfortunately the above code does not work.
          It worked when I tested it thoroughly before posting it - and I used copy/paste to copy it from where I tested it so as to not change anything.

          The most recent browser where that code wouldn't work is IE8 (because IE8 only supports jScript and not JavaScript) but that browser is long dead with IE11 being the ONLY version of Internet Explorer still supported (and even IE9 supported JavaScript).
          Last edited by felgall; Sep 28, 2016, 03:48 AM.
          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


          • #6
            It works fine in JSFiddle, but not in Dreamweaver. That is weird. I cannot see the output when I click the Multiply button (browser: Safari ver 9.1.1). Is there a way I can upload the zipped folder here to show you the Dreamweaver files? Many Thanks

            Comment


            • #7
              The fat bloated overpriced steaming dung-heap known as Dreamweaver generates the worst and most out-of-date Javascript code possible. Such as new String().
              No-one here uses it and I would recommend that you dump it.

              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


              • #8
                I see where the issue is coming from. My external JS file link was inside the <head> </head>. When I placed it at the end of my HTML tag in the <body>, it worked fine in Dreamweaver. May I know whether JS <script> should be always inside the <body>? How do we determine where to place the JS script in our HTML?
                Thank you

                Comment


                • #9
                  I know of exactly two one liner JavaScripts that need to go in the head (because they need to run before any of the page displays - one is a framebreaker and the other is a <noscript> tag replacement for all browsers except Netscape 4 and earlier and more recent browsers). ALL other JavaScript should be attached just before the </body> tag where the rest of the HTML has already loaded so as to be able to interact with it.
                  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

                  Working...
                  X