我对如何使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>