CODEWITHSUNDEEP
javascriptjqueryinput
Lucian cahil
Lucian cahil

Reputation: 83

Average of multiple inputs

I'm trying to do it so that the h1 with id"totes" will show the average of all the inputs. including ones added, when I click the "calc" button. How would I do that? Also, how can I prevent non-numbers from being accepted into the inputs?

$(document).ready(function(){
  $('#new').click(function(){
    $('#inp').append("<input type='text' value='0' id='in'>")
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='totes'>0</h1>
<div id='inp'>
  <input type='text' value='0' id='in'>
</div>
<button id='new'>Create</button>
<button id='calc'>Calculate</button>

Upvotes: 2

Views: 395

Answers (3)

WonderVanita
WonderVanita

Reputation: 26

Here is your answer :
<h1 id='totes'> 0 </h1>
<div id='inp'>
    <input type='text' value='' id='in' onkeypress="return isNumber(event)" >
 </div>
 <button id='new'>
     Create
 </button>
 <button id='calc'>
     Calculate
 </button>

<script type="text/javascript">     
    $(document).ready(function(){
        $('#new').click(function(){
            var inValue = $('#in').val(); 
            $('#inp').append("<input type='text' class='newin' value='"+ inValue +"'>");
        });

        $('#calc').click(function(){
            var total = 0;
            var valid_labels = 0;
            var average;

            $('input').each(function () {
                var val = parseInt($(this).val(), 10);
                if (!isNaN(val)) {
                    valid_labels += 1;
                    total += val;
                }
            });

            average = total / valid_labels;
            $('#totes').text(average);
        });
    });

    function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Upvotes: 0

prasanth
prasanth

Reputation: 22500

Try like this

  1. calculate the all input value to some variable.
  2. Then add the average value to totes id on calculate button click
  3. For simply change the input type to number.Its allowed to type number only on the input

$(document).ready(function() {
  $('#new').click(function() {
    $('#inp').append("<input type='number' value='0' >")
  });
  var t=0;
  $('#calc').click(function(){
    $('input').each(function(){
      t +=parseFloat($(this).val()|0)
    })
    $('#totes').html(t/ $('input').length)
    
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='totes'>
  0
</h1>
<div id='inp'>
  <input type='number' value='0' >
</div>
<button id='new'>
Create
</button>
<button id='calc'>
Calculate
</button>

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12171

Here you go with one more solution

$(document).ready(function(){
  $('#create').click(function(){
      $('#inp').append("<input type='text' value='0' />");
  });
  
  $('#calc').click(function(){
    var sum = 0;
    var cnt = 0;
    $('input[type="text"]').each(function(){
      sum += parseInt($(this).val());
      cnt++;
    });
    
    $('#totes').html(sum/cnt);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='totes'>
0
</h1>
<div id='inp'>
    <input type='text' value='0' id='in' />
</div>
<button id='create'>Create</button>
<button id='calc'>Calculate</button>

Hope this will help you.

Upvotes: 1

Related Questions