显示两个变量的平均值

Question

我无法显示用户为挑战所做的每轮平均点击次数。当我进入控制台时，我可以计算出平均数，但我似乎无法弄清楚如何显示它。

JFiddle： https://jsfiddle.net/tglas/tkL4p8on/5/

我的CSS:

<div>
  round:<span id="rounds">1</span>
</div>

<div >
  clicks:<span id="clicks">0</span>
</div>
<div>
  Average:<span id="avgDisplay">0</span>
</div>

<button id="reset">
  New Round
</button>

<button id="option1">
  Option 1
</button>

<button id="option2">
  Option 2
</button>

和 JS:

var roundsDisplay = document.querySelector("#rounds");
var clicksDisplay = document.querySelector("#clicks");
var option1 = document.querySelector("#option1")
var option2 = document.querySelector("#option2");
var reset = document.querySelector("#reset")
var rounds = 1;
var clicks = 0;
var avg = clicks / rounds;


option1.addEventListener("click", function() {
  clicks++;
  clicksDisplay.innerHTML = clicks;
})

option2.addEventListener("click", function() {
  clicks++;
  clicksDisplay.innerHTML = clicks;
})

reset.addEventListener("click", function() {
  rounds++;
  roundsDisplay.innerHTML = rounds;
})

avgDisplay.innerHTML = avg;

我知道我可能在这里遗漏了一些基本的东西，但我是编程新手，如果能帮助我理解这个概念，我将不胜感激。

Answer 1

您只是在计算平均一次，即您的 JS 文件第一次运行。但是你想在每次增加计数器时计算平均值。

只需创建一个函数，计算每次按下按钮时的平均值，并创建一个 avgDisplay 变量。（就像评论中提到的 Olivier）

var avgDisplay = document.querySelector("#avgDisplay");
function updateAverage() {
    avgDisplay.innerHTML = clicks / rounds;
}

并在增加计数器后将其添加到您的事件回调中例如

option2.addEventListener("click", function() {
  clicks++;
  clicksDisplay.innerHTML = clicks;
  updateAverage();
})

显示两个变量的平均值

Displaying an average of two variables

javascript

average

display