时间戳

首页 > 解决方案 > 如何使 HTML 中的按钮具有数字的值？

javascript - 如何使 HTML 中的按钮具有数字的值？

问题描述

我有一个问题，您如何使 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;
}

标签： javascripthtmlbutton

解决方案

It's probably best to do all the math based on the contents of arr and not to use the current value inside the "demo" element to perform the calculation. The following works for me; you can skip some of the repetitive HTML by creating the buttons dynamically, but I guess that's beyond the scope here.

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>

推荐阅读