Блог

Главная - Вопросы по программированию - Как найти частоту чисел в списке из пользовательского ввода HTML

Как найти частоту чисел в списке из пользовательского ввода HTML

#javascript #html #list #user-input #frequency

#javascript #HTML #Список #пользовательский ввод #частота

Вопрос:

Я пытаюсь создать код, который выдаст сумму, среднее, минимальное, максимальное значение и частоту чисел в списке. С помощью других я смог получить сумму, среднее, максимальное и минимальное значение, но не частоту. Я пытаюсь сделать так, чтобы при нажатии на кнопку, которая находится рядом с другими кнопками математических функций, она предупреждала вас о том, сколько раз все числа отображались в списке. Например, если список чисел, который пользователь вводит, равен 1,7,7,7,3,1, и пользователь нажимает на кнопку частоты, он выводит, сколько раз 1 встречается в списке (2), сколько раз 7 встречается в списке (3) и сколько раз 3 встречается в списке (1).

  .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>

Ответ №1:

Альтернативой является сохранение частоты / счетчика в объекте, где ключами являются введенные числа.

 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>

Комментарии:

1. Есть ли способ добавить текст внутри предупреждения? Например, он мог бы сказать: «Число 1 появилось в списке 3 раза», если пользователь ввел число 1 три раза.

2. Работает отлично! Спасибо!

Ответ №2:

Один из способов — создать карту, которую вы обновляете с частотой каждого числа, а затем выводите результаты.

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

    return acc;
  }, {});
}