Javascript onchange和通过textbox在数组中存储数字时遇到问题_Javascript_Loops_For Loop_Click_Onchange

Javascript onchange和通过textbox在数组中存储数字时遇到问题

javascript loops for-loop

Javascript onchange和通过textbox在数组中存储数字时遇到问题,javascript,loops,for-loop,click,onchange,Javascript,Loops,For Loop,Click,Onchange,我的onchange无法工作，无法通过文本框将数字存储在数组中。我想要代码做的是获取输入到文本框中的数字的统计信息。我通过让用户在文本框中输入数字并按Enter键来显示这些数字来实现这一点。在将数字放入列表以显示输入的数字之前，应将其放入数组中。但是，当我点击回车键或点击文本框时，onchange并没有触发，我经常会遇到这个错误对于存储在数组中的数字，我想尝试获取这些数字的平均值。但是，我不断得到错误“NaN”，这使我认为我的数字没有正确地存储到数组中代码如下： <html>

我的onchange无法工作，无法通过文本框将数字存储在数组中。
我想要代码做的是获取输入到文本框中的数字的统计信息。我通过让用户在文本框中输入数字并按Enter键来显示这些数字来实现这一点。在将数字放入列表以显示输入的数字之前，应将其放入数组中。但是，当我点击回车键或点击文本框时，onchange并没有触发，我经常会遇到这个错误

对于存储在数组中的数字，我想尝试获取这些数字的平均值。但是，我不断得到错误“NaN”，这使我认为我的数字没有正确地存储到数组中

代码如下：

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


统计数据
数组称为数字。number.sort（）
进入


获取统计数据
平均值=
函数列表（）{
var liElement=document.createElement（“li”）；//创建新的列表元素//
var-ulElement=document.getElementById（“list1”）；//获取ulElement//
var input=document.getElementById（“value”）.value；//从文本框中获取文本//
var numbers=[]；//创建名为numbers的数组
numbers.push（输入）；//向数组中添加新项
//for循环//
对于（变量i=0；i

尝试通过addEventListener添加它，而不是像这样内联：

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

平均值总是

NaN

的原因是，从开始时，平均值数组始终是空数组。我想你指的是一个

数字

数组

您必须在这两个函数的作用域之外声明数组，因为它是这两个函数的共同点

将

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>

数组称为数字。number.sort（）
进入


获取统计数据
平均值=

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;
}

document.getElementById（'value'）.addEventListener（'change'，list）；
document.getElementById（'button1'）。addEventListener（'click'，list）；
document.getElementById（'stat_按钮'）。addEventListener（'click'，calculateMean）；
var数=[]；
函数列表（）{
var liElement=document.createElement（“li”）；//创建新的列表元素//
var-ulElement=document.getElementById（“list1”）；//获取ulElement//
var input=document.getElementById（“value”）.value；//从文本框中获取文本//
numbers.push（输入）；//向数组中添加新项
//for循环//
对于（变量i=0；i


不确定onchange
问题，但是数字。按下（输入）
将向数组中添加一个元素，该字符串包含用户在字段中输入的任何内容。您可能需要类似于numbers=input.split（/[，]+/）
的东西，通过在逗号和/或空格上拆分字符串来创建数组。嘿，非常感谢您的输入。添加事件侦听器而不是内联修复了该错误。嘿！感谢您提供有关事件侦听器的建议，而不是内联。这似乎消除了onchange所涉及的错误。在函数之外声明数组也很有意义，因为我将在多个函数中使用它。我在JSFIDLE中注意到，您放入数组的数字都显示为1，而不是输入的数字。此外，平均值似乎计算不正确。你有没有办法更新这个，让我更好地理解如何用数组中的数字计算平均值？谢谢你@MizanShaikh检查更新的小提琴。现在已经摆脱了for循环。如果要读取以逗号分隔的值列表，则必须添加其他逻辑。