我正在尝试制作一个代码，用于给出列表中数字的总和，平均值，最小值，最大值和频率。在其他人的帮助下，我能够得到总和，平均值，最大值和最小值，但不能得到频率。我试图这样做，当你点击其他数学功能按钮旁边的按钮时，它会提醒你所有数字在列表中显示的次数。例如，如果用户键入的数字列表是1,7,7,7,3,1，并且用户点击频率按钮，则输出列表中的1次（2），多少次列表（3）中有7个，列表（1）中有3个。
.title { font-weight:bold; margin-top:1em; }<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--- This only allows the user to input numbers --->
<input type='number' id='input'>
<!--- This is the button that adds the number to the list --->
<input type='button' value='add to list' id='add' disabled="disabled">
<!--- Here we have a title for the list --->
<div class="title">Topics</div>
<!--- This will list all of the numbers --->
<ul id='list'></ul>
<!--- When clicked, this buttons alert the user with the numbers --->
<button id="sum"> Sum </button>
<button id="max"> Max </button>
<button id="min"> Min </button>
<button id="avg"> Avg </button>
<div>
<button value="Refresh Page" onclick="window.location.reload()" > Reset! </button>
</div>
<script>
let list = document.getElementById("list");
let input = document.getElementById("input");
let add = document.getElementById("add");
var avg = 0;
var sum = 0;
var min = -Infinity;
var max = Infinity;
// This will add the input number to the list and clear the input
function addClick () {
var li = document.createElement("li");
li.textContent = input.value;
list.appendChild(li);
update();
input.value = "";
add.disabled = "disabled";
}
// This allows the "add to list" button to be turned on/off depending if the user has typed in a number
function enableDisable(){
if(this.value === ""){
add.disabled = "disabled";
} else {
add.removeAttribute("disabled");
}
}
// This will calculate and update all variable values
function update() {
sum = 0;
min = Infinity;
max = -Infinity;
var count = 0;
for (var i of list.children) {
let val = +i.textContent;
sum += val;
if (val > max) max = val;
if (val < min) min = val;
count++;
}
avg = sum/count;
}
// This functions will alert the numbers
function sumClick() {
alert("The sum of your numbers is: " + sum);
}
function avgClick() {
alert("The average of your numbers is: " + avg);
}
function minClick() {
alert("The smaller number is: " + min);
}
function maxClick() {
alert("The greater number is: " + max);
}
// Here we add all events
input.addEventListener("input", enableDisable);
add.addEventListener("click", addClick);
document.getElementById("avg").addEventListener("click", avgClick);
document.getElementById("sum").addEventListener("click", sumClick);
document.getElementById("min").addEventListener("click", minClick);
document.getElementById("max").addEventListener("click", maxClick);
</script>
</body>
</html>另一种方法是将频率/计数器保持在一个对象中，其中键是输入的数字。
let list = document.getElementById("list");
let input = document.getElementById("input");
let add = document.getElementById("add");
var avg = 0;
var sum = 0;
var min = -Infinity;
var max = Infinity;
let frequency = Object.create(null);
// This will add the input number to the list and clear the input
function addClick() {
var li = document.createElement("li");
li.textContent = input.value;
list.appendChild(li);
update(input.value);
input.value = "";
add.disabled = "disabled";
}
// This allows the "add to list" button to be turned on/off depending if the user has typed in a number
function enableDisable() {
if (this.value === "") {
add.disabled = "disabled";
} else {
add.removeAttribute("disabled");
}
}
// This will calculate and update all variable values
function update(enteredValue) {
frequency[enteredValue] = (frequency[enteredValue] || 0) + 1;
sum = 0;
min = Infinity;
max = -Infinity;
var count = 0;
for (var i of list.children) {
let val = +i.textContent;
sum += val;
if (val > max) max = val;
if (val < min) min = val;
count++;
}
avg = sum / count;
}
function frequencyClick() {
let text = Object.entries(frequency).reduce((a, [number, fqy]) => {
return a.concat(`The number ${number} appeared ${fqy} time(s) in the list`)
}, []).join('\n');
alert(text);
}
// This functions will alert the numbers
function sumClick() {
alert("The sum of your numbers is: " + sum);
}
function avgClick() {
alert("The average of your numbers is: " + avg);
}
function minClick() {
alert("The smaller number is: " + min);
}
function maxClick() {
alert("The greater number is: " + max);
}
// Here we add all events
input.addEventListener("input", enableDisable);
add.addEventListener("click", addClick);
document.getElementById("avg").addEventListener("click", avgClick);
document.getElementById("sum").addEventListener("click", sumClick);
document.getElementById("min").addEventListener("click", minClick);
document.getElementById("max").addEventListener("click", maxClick);
document.getElementById("frequency").addEventListener("click", frequencyClick);.title {
font-weight: bold;
margin-top: 1em;
}<link rel="stylesheet" type="text/css" href="style.css">
<!--- This only allows the user to input numbers --->
<input type='number' id='input'>
<!--- This is the button that adds the number to the list --->
<input type='button' value='add to list' id='add' disabled="disabled">
<!--- Here we have a title for the list --->
<div class="title">Topics</div>
<!--- This will list all of the numbers --->
<ul id='list'></ul>
<!--- When clicked, this buttons alert the user with the numbers --->
<button id="sum"> Sum </button>
<button id="max"> Max </button>
<button id="min"> Min </button>
<button id="avg"> Avg </button>
<button id="frequency"> Frequency </button>
<div>
<button value="Refresh Page" onclick="window.location.reload()"> Reset! </button>
</div>一种方法是创建一个地图，您使用每个数字的频率更新，然后输出结果。
function calcFreq() {
return list.children.map(i => +i.textContent).reduce((acc, val) => {
if (acc[val]) {
acc[val] += 1;
} else {
acc[val] = 1;
}
return acc;
}, {});
}