Как найти средние, максимальные и минимальные номера списка из пользовательского ввода в HTML - PullRequest
Новая
       11

Как найти средние, максимальные и минимальные номера списка из пользовательского ввода в HTML

1 голос
/ 22 марта 2019

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

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

  
  <!--- This will list all of the numbers in the list --->
  
  <div class="title">Topics</div>
  <ul id='list'></ul> 
  
   <!--- When clicked, this will alert the user with the sum of their numbers --->
  
  <button id="something">Click Here To See The Sum</button>

  <script>
    
    let list = document.getElementById("list");;
    let btn = document.getElementById("something");
    let input = document.getElementById("input");
    let add = document.getElementById("add");
    
    var sum = 0;
    
    input.addEventListener("input", enableDisable);
    btn.addEventListener("click", sumvar);

    add.addEventListener("click", function() {
      var li = document.createElement("li");
      li.textContent = input.value;
      sum += +input.value; 
      list.appendChild(li);
      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 function will alert the user of the sum of their numbers
      
    function sumvar() {
      alert("The sum of your numbers is: " + sum);
    }
    
    
  </script>   


</body>
  

  
  
</html>

Ответы [ 3 ]

2 голосов
/ 22 марта 2019

Вы можете добавить следующие две функции вверху вашего скрипта: 

    function getNumbersFromList() {
        let numbers = [];
        for (let i = 0; i < list.children.length; i++) {
            numbers.push(parseInt(list.children.item(i).textContent));
        }
        return numbers;
    }

    function getStatsForList() {
        let numbers = getNumbersFromList();
        return {
            sum: numbers.reduce((a, v) => a += v),
            average: numbers.reduce((a, v) => a += v) / numbers.length,
            max: Math.max(...numbers),
            min: Math.min(...numbers)
        }
    }

И затем вы можете использовать getStatsForList(), когда вам понадобится обновленная статистика для вашего образца.

Эту функцию также можно легко изменить, чтобы добавить больше статистики, если это необходимо ...

Обновление

Эта версия рассчитывает сумму только один раз и использует ее позже для вычисления среднего. 

    function getStatsForList() {
        let numbers = getNumbersFromList();
        let sum = numbers.reduce((a, v) => a += v);
        return {
            sum: sum,
            average: sum / numbers.length,
            max: Math.max(...numbers),
            min: Math.min(...numbers)
        }
    }
1 голос
/ 22 марта 2019 

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);
.title { font-weight:bold; margin-top:1em; }
<!--- 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>
0 голосов
/ 22 марта 2019

Вы можете отслеживать текущие минимальные, максимальные и количественные значения элементов по мере добавления новых элементов, сравнивать минимальные и максимальные значения и вычислять среднее значение. 

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

  
  <!--- This will list all of the numbers in the list --->
  
  <div class="title">Topics</div>
  <ul id='list'></ul> 
  
   <!--- When clicked, this will alert the user with the sum of their numbers --->
  
  <button id="something">Click Here To See The Sum</button>

  <script>
    
    
    
    let list = document.getElementById("list");;
    let btn = document.getElementById("something");
    let input = document.getElementById("input");
    let add = document.getElementById("add");
    var firstLoad = 1;
    var sum = 0;
    var avg = 0;
    var min = 0;
    var max = 0;
    var count = 0;
    input.addEventListener("input", enableDisable);
    btn.addEventListener("click", sumvar);

    add.addEventListener("click", function() 
    { 
      var li = document.createElement("li");
      li.textContent = input.value;
      sum += +input.value; 
      count=count+1;
       
      if(firstLoad===1) { 
       min = input.value; //set min and max first time
        max = input.value;
        firstLoad = 0; //clear the firstload marker
      }
      else
      {
      
        if(min > input.value) { //compare input to min
           min = input.value;
        }
        if(max < input.value) { //compare input to max
          max = input.value; //enteredNumber;
        }
      }
      avg = sum/count; //calculate average
      list.appendChild(li);
      input.value = "";  
      add.disabled = "disabled";
    });
    
    function enableDisable() { 
      if(this.value === ""){
        add.disabled = "disabled";
      } else {
        add.removeAttribute("disabled");
      }
    }
    
    // This function will alert the user of the sum of their numbers
      
    function sumvar() {
      alert("sum:" + sum + ",avg:" + avg + ",min:" + min + ",max:" + max);
    }
    
    
  </script>   


</body>
  

  
  
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...