0

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

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;

我知道我可能在这里遗漏了一些基本的东西，但我是编程新手，希望能帮助我弄清楚这个概念。

4

1 回答 1

0

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

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

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

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

option2.addEventListener("click", function() {
  clicks++;
  clicksDisplay.innerHTML = clicks;
  updateAverage();
})
于 2016-01-25T15:10:29.823 回答