如何从用户输入HTML中查找列表中的数字频率

Question

I'm trying to make a code that will give the sum, average, min, max, and frequency of numbers in a list. 我正在尝试制作一个代码，用于给出列表中数字的总和，平均值，最小值，最大值和频率。 With the help of others, I was able to get the sum, average, max, and min, but not frequency. 在其他人的帮助下，我能够得到总和，平均值，最大值和最小值，但不能得到频率。 Im trying to make it so that when you click on a button that is next to the other math function buttons, it alerts you with how many times all of the numbers have shown up in the list. 我试图这样做，当你点击其他数学功能按钮旁边的按钮时，它会提醒你所有数字在列表中显示的次数。 For example, if the list of numbers the user types in is 1,7,7,7,3,1, and the user clicks on the frequency button it outputs how many times 1 is in the list (2), how many times 7 is in the list (3), and how many times 3 is in the list (1). 例如，如果用户键入的数字列表是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>

Answer 1

An alternative is keeping the frequency/counter in an object where the keys are the entered numbers. 另一种方法是将频率/计数器保持在一个对象中，其中键是输入的数字。

 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>

Answer 2

One way is to create a map that you update with the frequency of each number then output the results. 一种方法是创建一个地图，您使用每个数字的频率更新，然后输出结果。

function calcFreq() {
  return list.children.map(i => +i.textContent).reduce((acc, val) => {
    if (acc[val]) {
      acc[val] += 1;
    } else {
      acc[val] = 1;
    }

    return acc;
  }, {});
}

如何从用户输入HTML中查找列表中的数字频率

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-03-22 00:34:24

解决方案2
0 2019-03-22 00:35:09

如何从用户输入HTML中查找列表中的数字频率

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-03-22 00:34:24

解决方案2 0 2019-03-22 00:35:09

解决方案1
0 已采纳 2019-03-22 00:34:24

解决方案2
0 2019-03-22 00:35:09