Question

我无法使用onchange工作，并通过文本框将数字存储在数组中我想要的代码是获取输入到文本框中的数字的统计信息。我这样做是让用户在文本框中输入数字，然后按Enter键显示这些数字。在将数字放入列表以显示输入的数字之前，应将数字放入数组中。但是，当按下Enter键或单击文本框时，我不会触发onchange时出现此错误。

Here is an image of the error I am getting when inspecting the code

如果数字存储在数组中，我想尝试获取数字的均值。但是，我不断收到错误＆＃34; NaN＆＃34;这让我觉得我的数字没有正确存储到数组中。

以下是代码：

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

Answer 1

尝试通过addEventListener而不是内联添加它：

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

Answer 2

Mean始终为NaN的原因是因为你的平均数组在开始时总是一个空数组。我想你在这里指的是一个numbers数组。

您必须在2个函数的范围之外声明该数组，因为它们是两者共有的。

将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

无法通过文本框进行onchange并在数组中存储数字

2 个答案: