Question

我正在尝试这样做，以便id为“totes”的h1将显示所有输入的平均值。包括添加的，当我点击“计算”按钮。我该怎么办？另外，如何防止非数字被接受到输入中？

$(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>

Answer 1

在这里，您可以再使用一个解决方案

＆＃13;

$(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);
  });
  
});

＆＃13;

<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>

＆＃13;

希望这会对你有所帮助。

Answer 2

试试这个

计算某个变量的所有输入值。
然后在计算按钮单击

totes

只需将输入类型更改为number.Its只允许在输入中键入数字

$(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>

Answer 3

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>

多个输入的平均值

3 个答案: