Total sum of an input in javascript

Question

I was trying to find the total sum of the price a user would input in the pop-up window and display the total. Would i have to add another line under the output? I am trying to add the total along the outMsg but not successful. Thanks

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array 02</title>
</head>


  <form action="">

<p>BOOK SALE</p>
<p id="Books"</p>
<input type="button" value="Start" onClick="Books()";>

</form>  
<body>
<script>
    function Books()
    {
            //define variables 
            var  arraySize = 2;
            var bookName = new Array(arraySize);
            var bookPrice = new Array(arraySize);
            var total = 0;

            var outMsg      = "";

            for(var i = 0; i < arraySize; i++)

            {
                    bookName[i] = prompt('Enter Book Name:  ', "");
                    bookPrice[i] = prompt('Enter the Price: ',0);
            }
            for(var i = 0; i < arraySize; i++)

            {
                outMsg = outMsg + bookName[i] + " " + bookPrice[i] + "</br>" + total; // put backslash n (\n) to show on window
                //alert(outMsg)
                document.getElementById("Books").innerHTML = outMsg;

            }
    }
    </script>
</body>
<html>

<p id="Books"</p> is this a typo or your problem? You do not exit the opening <p> tag. — Glubus
– Glubus, Commented Apr 19, 2016 at 11:55
i think it is an error i made, sometimes i miss out some brackets. thanks for pointing out. — DanPhelps
– DanPhelps, Commented Apr 19, 2016 at 11:56
What text editor are you using to develop this? Lots of text editors have linters available. Linters are tools that check your syntax every time you save, and tell you if you made a mistake (for instance a missing <). — Glubus
– Glubus, Commented Apr 19, 2016 at 11:59

David Pine · Accepted Answer · 2016-04-19 12:06:34Z

1

In your loop you need to tally the total variable like so:

for(var i = 0; i < arraySize; i++)
{
    total += parseFloat(bookPrice[i]);
    // Whatever else you need to do...
}

edited Apr 19, 2016 at 12:06

answered Apr 19, 2016 at 11:55

David Pine

24.6k11 gold badges82 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sinhayash · Accepted Answer · 2016-04-19 12:07:03Z

Calculate total and use parseInt (or parseFloat) to typecast

    function Books() {
      //define variables 
      var arraySize = 2;
      var bookName = new Array(arraySize);
      var bookPrice = new Array(arraySize);
      var total = 0;

      var outMsg = "";

      for (var i = 0; i < arraySize; i++)

      {
        bookName[i] = prompt('Enter Book Name:  ', "");
        bookPrice[i] = prompt('Enter the Price: ', 0);
        total += parseInt(bookPrice[i]);
      }
      for (var i = 0; i < arraySize; i++)

      {
        outMsg = outMsg + bookName[i] + " " + bookPrice[i] + "</br>" + total + "</br>"; // put backslash n (\n) to show on window
        //alert(outMsg)
        document.getElementById("Books").innerHTML = outMsg;

      }
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Array 02</title>
</head>


<form action="">

  <p>BOOK SALE</p>
  <p id="Books" </p>
    <input type="button" value="Start" onClick="Books()" ;>

</form>

<body>
  <script>
  </script>
</body>
<html>

shivgre · Accepted Answer · 2016-04-19 12:12:50Z

First you need to calculate total by using parseInt() and adding to the total variable in your for loop. Then you need to just calculate the response that you wish to append and then attach that response outside the second for loop to your required element. Array 02

  <form action="">

<p>BOOK SALE</p>
<p id="Books"</p>
<input type="button" value="Start" onClick="Books();" >

</form>  
<body>
<script>
    function Books()
    {
            //define variables 
            var  arraySize = 2;
            var bookName = new Array(arraySize);
            var bookPrice = new Array(arraySize);
            var total = 0;

            var outMsg      = "";

            for(var i = 0; i < arraySize; i++)    
            {
                    bookName[i] = prompt('Enter Book Name:  ', "");
                    bookPrice[i] = prompt('Enter the Price: ',0);
                    total += parseInt(bookPrice[i]);
            }
            console.info("TOTAL PRICE:" + total );//this will print in blue color the total price in your console
            for(var i = 0; i < arraySize; i++)    
            {
                outMsg = outMsg + bookName[i] + " " + bookPrice[i] + "</br>" + total; // put backslash n (\n) to show on window
                //alert(outMsg)
                console.info("OutMsg :" + outMsg);// use console.log(),console.info(), console.warn(), instead of the old school alert() along with the browser/firebug console.
                 //You should move this line out of for loop because you only have one element in which you wish to append your output
                //document.getElementById("Books").innerHTML = outMsg;

            }
            document.getElementById("Books").innerHTML = outMsg;
    }
    </script>
</body>
<html>

Thanks shivgre, somehow while making modification to my code, i notice the numbers get printed out even on the second book name. will need to recheck my code, thanks for the help
@DanPhelps nah, its still not done, try just clicking once on up button

Collectives™ on Stack Overflow

Total sum of an input in javascript

3 Answers 3

Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Related