添加新数字时如何获得一些数字的即时平均值

How to get instant average of some numbers when I add a new one

我是编程新手,我尝试了很多方法来找到可以帮助我解决这个问题的东西。

<form name="calc">
<input name="rezultat"/>
<input type="button" name="1" value="2" onclick="run2()"/>
<input type="button" name="1" value="3" onclick="run3()"/>
<input type="button" name="1" value="4" onclick="run4()"/>
<input type="button" name="1" value="5" onclick="run5()"/>
<input type="button" name="1" value="6" onclick="run6()"/>
<input type="button" name="1" value="7" onclick="run7()"/>
<input type="button" name="1" value="8" onclick="run8()"/>
<input type="button" name="1" value="9" onclick="run9()"/>
<input type="button" name="1" value="10" onclick="run10()"/>
</form>

这是我的HTML代码

我的想法是当我通过单击特定按钮(每个按钮都有一个值和一个 onclick 属性)添加一个新的数字时立即对数字进行平均,并在 "rezultat" 字段中显示。

如果你能帮助我编写脚本,我将不胜感激。

给你,大部分解释都在评论中内联完成。

<form id="calc" name="calc">
<input name="rezultat" id="rezultat" />
<input type="button" name="1" value="2" />
<input type="button" name="1" value="3" />
<input type="button" name="1" value="4" />
<input type="button" name="1" value="5" />
<input type="button" name="1" value="6" />
<input type="button" name="1" value="7" />
<input type="button" name="1" value="8" />
<input type="button" name="1" value="9" />
<input type="button" name="1" value="10" />
</form>

<script type="text/javascript">
var count = 0; // global scope variable
var total = 0; // global scope variable

// define your function to calculate a new value
var calc = function(e){

  // add value of button clicked to total
  total += Number(e.target.value);

  // add 1 to the counter
  count += 1;

  // set rezultat to average (total / count)
  document.getElementById('rezultat').value = total / count; 

  // stop bubbling and default handler
  return false;
}

// get array of the buttons in the form
buttons = document.querySelectorAll('#calc input[type=button]');

// loop through the buttons
for(var i=0;i<buttons.length;i++){

  // bind a handler for the click event of each button
  buttons[i].addEventListener('click',calc,false);
}
</script>