Question 244064 in Html Question posted in
Some basic documentation can be found here.

Html – how do i display values entered into a form and values calculated from them using javascript?

i’m currently working on an exercise for a class i’m auditing and i was supposed to make a form where the user inputs three numbers and those numbers get added up, averaged, and multiplied. after that, i’m supposed to display the user input numbers and the results of those operations.

however, innerhtml isn’t changing anything upon submitting the form. what should i do to fix that?

thanks so much in advance for the help!

this is what my code looks like:

<html>
<head>
<script type="text/javascript">
    function runNumbers(){
         var num1 = document.getElementById("number1").value;
         var num2 = document.getElementById("number2").value;
         var num3 = document.getElementById("number3").value;

         var n1 = parseInt(num1);
         var n2 = parseInt(num2);
         var n3 = parseInt(num3);

         var sum = n1+n2+n3;
         var ave = sum/3;
         var pro = n1*n2*n3;

         if(isNaN(n1), isNaN(n2), isNaN(n3)){
             document.getElementById('calculations').innerHTML = "<h2>error!</h2><p>you put numbers in there, right?</p>"
         } else {
             document.getElementById('calculations').innerHTML = "<h2>okay, so according to my calculations...</h2><p>the numbers you entered were "+n1+", "+n2+", and"+n3+", "+"the sum of your numbers is "+sum+", "+"the average of your numbers is "+ave+", "+"and the product of your numbers is "+pro+".</p>";
         }
    }
</script>
</head>
<body>
<div class="assignment">
    <h2>gimme three numbers and i'll do some analysis.</h2>
    <form name="gimme">
        <label for="number1">my first number is </label>
        <input type="text" id="number1" name="number1"> .
        <label for="number2">my second number is </label>
        <input type="text" id="number2" name="number2"> .
        <label for="number3">my third number is </label>
        <input type="text" id="number3" name="number3"> .
        <input type="submit" onsubmit="runNumbers();" value="run my numbers!">
        <input type="reset"value="reset">
    </form>
    <div id="container">
        <div id="calculations"></div>
    </div>
</div>
<body>
</html>
Tags:

2

Answers


  1. 0

    Your code has a problem since you are utilizing the onsubmit property on the submit button, which is not the correct approach to handle form submission. Instead, you should utilize the form’s onsubmit event. In addition, there is a minor issue in your HTML structure; the ending /body> tag should be substituted with /html>. Here’s the updated code:

    <html>
<head>
<script type="text/javascript">
    function runNumbers(event) {
        // Prevent the form from submitting and refreshing the page
        event.preventDefault();

        var num1 = document.getElementById("number1").value;
        var num2 = document.getElementById("number2").value;
        var num3 = document.getElementById("number3").value;

        var n1 = parseInt(num1);
        var n2 = parseInt(num2);
        var n3 = parseInt(num3);

        var sum = n1 + n2 + n3;
        var ave = sum / 3;
        var pro = n1 * n2 * n3;

        if (isNaN(n1) || isNaN(n2) || isNaN(n3)) {
            document.getElementById('calculations').innerHTML = "<h2>error!</h2><p>you put numbers in there, right?</p>"
        } else {
            document.getElementById('calculations').innerHTML = "<h2>okay, so according to my calculations...</h2><p>the numbers you entered were " + n1 + ", " + n2 + ", and " + n3 + ", " + "the sum of your numbers is " + sum + ", " + "the average of your numbers is " + ave + ", " + "and the product of your numbers is " + pro + ".</p>";
        }
    }
</script>
</head>
<body>
<div class="assignment">
    <h2>gimme three numbers and I'll do some analysis.</h2>
    <form name="gimme" onsubmit="runNumbers(event);">
        <label for="number1">my first number is </label>
        <input type="text" id="number1" name="number1"> .
        <label for="number2">my second number is </label>
        <input type="text" id="number2" name="number2"> .
        <label for="number3">my third number is </label>
        <input type="text" id="number3" name="number3"> .
        <input type="submit" value="run my numbers!">
        <input type="reset" value="reset">
    </form>
    <div id="container">
        <div id="calculations"></div>
    </div>
</div>
</body>
</html>

    In this code, I added the event option to the runNumbers method and used event.preventDefault() to prevent the page from refreshing due to the default form submission behavior.

    Login or Signup to reply.
  2. 0

    Your code looks good for capturing user input from a form and performing calculations with JavaScript. However, there’s a minor issue with your HTML structure – you have a <body> tag within the <body> tag. You should close the first <body> tag before the second one. Here’s the corrected HTML structure:

    <html>
     <head>
     <script type="text/javascript">
         function runNumbers() {
             var num1 = document.getElementById("number1").value;
             var num2 = document.getElementById("number2").value;
             var num3 = document.getElementById("number3").value;

             var n1 = parseInt(num1);
             var n2 = parseInt(num2);
             var n3 = parseInt(num3);

             var sum = n1 + n2 + n3;
             var ave = sum / 3;
             var pro = n1 * n2 * n3;

             if (isNaN(n1) || isNaN(n2) || isNaN(n3)) {
              document.getElementById('calculations').innerHTML = "<h2>Error!</h2> 
              <p>You didn't input valid numbers.</p>";
             } else {
               document.getElementById('calculations').innerHTML = "<h2>Okay, so 
               according to my calculations...</h2><p>The numbers you entered were " +  n1 + ", " + n2 + ", and " + n3 + ". The sum of your numbers is " + sum + ". The average of your numbers is " + ave + ". The product of your numbers is " + pro + ".</p>";
             }
          }
      </script>
      </head>
      <body>
      <div class="assignment">
        <h2>Gimme three numbers and I'll do some analysis.</h2>
        <form name="gimme" onsubmit="runNumbers(); return false;">
          <label for="number1">My first number is </label>
          <input type="text" id="number1" name="number1"> .
          <label for="number2">My second number is </label>
          <input type="text" id="number2" name="number2"> .
          <label for="number3">My third number is </label>
          <input type="text" id="number3" name="number3"> .
          <input type="submit" value="Run my numbers!">
          <input type="reset" value="Reset">
        </form>
        <div id="container">
          <div id="calculations"></div>
        </div>
      </div>
      </body>
      </html>

    I made the following changes:

    1. Corrected the <body> tag structure.

    2. Added return false; to the onsubmit attribute of the form element to prevent it from actually submitting the form, as you want to handle the submission with JavaScript.

    3. Fixed the condition in the if statement to use || (logical OR) instead of , (comma) when checking if any of the input values is not a number.

    4. Improved the formatting of the error message and calculation results.
      With these changes, your form should work as expected, displaying the values entered into the form and the calculated values when the "Run my numbers!" button is clicked.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search