我对如何使HTML中的按钮具有数字值有疑问?我必须建立一个可以为我评分的系统。我已经制作了5个按钮,我想使每个按钮的值都在1到5之间。然后,每次单击按钮时,都会得到打印的文本,该文本将计算按钮值的平均值。有人知道如何提供帮助吗?

现在,我已经按下了一个按钮。这是我的HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo</title>

</head>
<body>
<h1> demo </h1>

    <input type="submit" value="rate" onclick="demo();" />
    <p id="demo"></p>
    <script type="text/javascript" src="script.js"></script>
</body>

</html>


这是我在JavaScript中尝试查找平均值的函数:

var arr = [];

function demo(){
  var sum = 0;
  for (var i = 0; i < arr.length; i++){
      sum += arr[i];
  }
  return sum / arr.length;
  document.getElementById("demo").innerHTML;
}



function pushArr() {
  var val = document.getElementById("demo").value = 1;
  arr.push(val);
  return arr;
}

最佳答案

最好是根据arr的内容进行所有数学运算,而不要使用“ demo”元素中的当前值来执行计算。以下对我有用;您可以通过动态创建按钮来跳过一些重复的HTML,但是我想这超出了这里的范围。



const arr = [];

function calculateAverage(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
      sum += array[i];
  }
  return sum / array.length;
}

function demo(rating) {
  arr.push(rating);
  const newValue = calculateAverage(arr);
  document.getElementById("demo").innerText = newValue;
}

<input type="submit" value="Add 1" onclick="demo(1)" />
<input type="submit" value="Add 2" onclick="demo(2)" />
<input type="submit" value="Add 3" onclick="demo(3)" />
<input type="submit" value="Add 4" onclick="demo(4)" />
<input type="submit" value="Add 5" onclick="demo(5)" />
<p id="demo"></p>

10-07 19:08
查看更多