All geek questions in one place

Problems with replacing and storing numbers in an array using a text field

I'm having problems with my onchange not working and not storing numbers in an array through a text field.
What I want the code to do is get statistics on the numbers entered in the text box. I do this by entering user numbers in the text box and pressing Enter to display these numbers. The numbers must be placed in an array before being placed on the list to display the numbers entered. However, I keep getting this error when onchange does not start when I press Enter or press a text field.

Here is the image of the error I get when checking the code

With the numbers stored in the array, I want to try to get the Average. But I keep getting the "NaN" error, which makes me think that my numbers are not stored in the array properly.

Here is the code:

<html>
<head>
  <title>Stats</title>
</head>

<p>Array is called numbers. numbers.sort();</p>

<div id="stats">

  <input type ="text" id="value" onchange="list()"> <!-- Getting the Onchange Error here -->

  <button id="button1" onclick = "list()">Enter</button>

  <ul id="list1">
  </ul>

<button id="stat_button" onclick="calculateMean()">Get Statistics</button>

<p id="mean">Mean= </p>

</div>



<script>

function list() {

      var liElement = document.createElement("li"); //Creating new list element//

      var ulElement = document.getElementById("list1");   //Get the ulElement//

      var input = document.getElementById("value").value; //Get the text from the text box//

      var numbers = []; //create Array called numbers
      numbers.push(input);//adds new items to the array

      //for loop//
      for(var i=0; i < numbers.length; i++) {
        liElement.innerHTML = numbers[0];  //Puts the array into the list for display//
        ulElement.appendChild(liElement); //add new li element to ul element//
      }
  }


function calculateMean() {

      var meanTotal = 0;
      var meanAverage = 0;
      var meanArray = [];

      for (var i = 0; i < meanArray.length; i++) {
        meanTotal += meanArray[i];
      }
      meanAverage = (meanTotal / meanArray.length);

      document.getElementById("mean").innerHTML = meanAverage;

}

</script>
+4
source share
2 answers

Try adding it via addEventListener instead of the built-in:

document.getElementById('value').addEventListener('change', function(e){
    list()
})
0
source

The reason the average is always NaNbecause your middle array is always an empty array when you start. I think you referenced the array numbershere.

You will have to declare the array outside the scope of the two functions, since it is common to both.

Javascript HTML. JS .

. , , numbers.

HTML

<p>Array is called numbers. numbers.sort();</p>

<div id="stats">

  <input type="text" id="value">
  <!-- Getting the Onchange Error here -->

  <button id="button1">Enter</button>

  <ul id="list1">
  </ul>

  <button id="stat_button">Get Statistics</button>

  <p id="mean">Mean= </p>

</div>

JS

document.getElementById('value').addEventListener('change', list);
document.getElementById('button1').addEventListener('click', list);
document.getElementById('stat_button').addEventListener('click', calculateMean);

var numbers = [];

function list() {
  var liElement = document.createElement("li"); //Creating new list element//

  var ulElement = document.getElementById("list1"); //Get the ulElement//

  var input = document.getElementById("value").value; //Get the text from the text box//

  numbers.push(input); //adds new items to the array

  //for loop//
  for (var i = 0; i < numbers.length; i++) {
    liElement.innerHTML = numbers[0]; //Puts the array into the list for display//
    ulElement.appendChild(liElement); //add new li element to ul element//
  }
}

function calculateMean() {

  var meanTotal = 0;
  var meanAverage = 0;

  for (var i = 0; i < numbers.length; i++) {
    meanTotal += numbers[i];
  }
  meanAverage = (meanTotal / numbers.length);

  document.getElementById("mean").innerHTML = meanAverage;
}

jsFiddle

0

Source: https://habr.com/ru/post/1657681/

More articles:


All Articles