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

并在增加计数器后将其添加到事件回调中 e.g。

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

显示两个变量的平均值

1 个答案: