www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need help creating a calculator that updates when values change

  1. #1
    Join Date
    Mar 2013
    Posts
    1

    Need help creating a calculator that updates when values change

    Hello fellow coders, I have a problem I need some help on. I have to make an average calculator on a website with javascript wherre the average updates when values change in the input boxes.
    Here is my code so far:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    function calcAvg(Box1,Box2,Box3,Box4,Box5 ){
    function preformCalc(Box1,Box2,Box3,Box4,Box5){
    function calcAvg(){
    
    functionCalcAvg(Box1,Box2,Box3,Box4,Box5/5){
    return statement= AvgCalc
    }
    </head>
    <body>
    <form name="Average">
    Box 1<input type="text" name="Box1"  value="0"  onchange=
    "calcAvg(document.totalprice.value,document.calcAvg.Box1.value"><br>
    Box2<input type="text" name="Box2"  value="0" onchange=
    "calcAvg(document.calcAvg.value,documentcal.calcAvg.Box2.value"><br> 
    Box 3<input type="text" name=" Box3"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box3.value"><br>
    Box 4<input type="text" name="Box4"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box4.value"><br>
    Box 5<input type="text" name="Box5"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box5.value"><br><br>
    Result<input type="text" name="Result"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Result.value
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2013
    Posts
    46
    Um, JavaScript goes in <script> tags, for starters. Not in <head> and not in "onchange" attribute. You can put some js in onchange, according to web browsers.. but don't.

    What you want to do, is grab all of the inputs that are in the form, add them all together, and divide them by the number of boxes.. 5. Then, you want to store that result inside of the "result" input.

    I suggest moving the result input outside of the form, so that you can use the form to grab all of the "box" inputs. You can simplify your html to this:
    Code:
    <form id="average">
        Box 1 <input type="text" value="1" /><br />
        Box 2 <input type="text" value="2" /><br />
        Box 3 <input type="text" value="3" /><br />
        Box 4 <input type="text" value="4" /><br />
        Box 5 <input type="text" value="5" />
    </form>
    <hr />
    Result <input type="text" id="result" value="0">
    Now, with that in place, you can use JavaScript to get the average when a key is typed on any box like so:
    Code:
    <form id="average">
        Box 1 <input type="text" value="1" /><br />
        Box 2 <input type="text" value="2" /><br />
        Box 3 <input type="text" value="3" /><br />
        Box 4 <input type="text" value="4" /><br />
        Box 5 <input type="text" value="5" />
    </form>
    <hr />
    Result <input type="text" id="result" value="0">
    <script>
    (function () { // This begins our javascript code:
        // Get the form
        var form = document.getElementById('average');
        
        // grab the result
        var result = document.getElementById('result');
        
        // grab the inputs, and turn them into an array:
        var inputs = Array.prototype.slice.call(
            // grab the input tags from inside our form:
            form.getElementsByTagName('input')
        );
        
        // only run some code "once", not everytime 'average' is called:
        var once = false; // We have not run the average code yet, hence 'false'.
        
        // Create and run the 'average' function:
        (function average () {
            // res will be the result of 'average'.
            // i and box are for dealing with the for loop and individual boxes.
            var i, box, res = 0; // start 'res' at 0 for addition.
            for (i in inputs) {
                box = inputs[i];
                if (!once) { // Have we ran this code once yet?
                    box.addEventListener('keyup', average); 
                    // This will call 'average' when 'keyup' is triggerred on our box.
                }
                res += parseInt(box.value); // add the "int" version of the box's value to 'res'
            }
            
            // 'res' is now the sum of all the box values.
            once = true; // The average code has now run at least once, hence 'true'
            
            // Assign the average to 'result's value.
            result.value = res / 5; // this divides the sum of all the boxes by 5- the number of boxes.. the average.
            
        }()); // This ends & runs the 'average' function.
        
    }()); // This closes our code.
    </script>
    See it working here:
    http://jsfiddle.net/Mfc4m/1/
    Last edited by s-p-n; 03-20-2013 at 06:12 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles