【问题标题】:Beginner JavaScript array issue初学者 JavaScript 数组问题
【发布时间】:2018-08-05 09:38:12
【问题描述】:

目前我必须在一个简单的网站上工作,该网站从用户那里获取三个值,将它们相加并提供平均值。讲师帮我把它放在一起,但今晚完成它我无法得到正确的平均值。

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Demonstrates some logic errors" />
  <meta name="keywords" content="HTML, average, errors" />
  <meta name="author" content="997993X"  />
  <title>Average numbers</title>
  <script src="badaverage.js"></script>
</head>
<body>
    <h1>Average numbers</h1>
    <p>Click the button to enter a series of numbers to average</p>
    <button id="enter">Enter your first number</button>
    <p><span id="numberList"></span></p>
    <button id="calculate">Calculate the average</button>
    <p><span id="result"></span></p>

</body>
</html>

这是我的 JS:

/*
   JavaScript used with 'average.html'
*/

"use strict";
//Global variables accessible to all functions
var numbers = [];  //create an empty array
var enterButton = null;  //global variables must be initialised
var calculateButton = null;

/* Get a number from the prompt
*  If a valid number add to array, if not give error message to user
*  Display the updated array of numbers on the web page
*  Make the Calculate button visible
*/
function enterNumber(){
    var number = prompt("Enter your number");
    var number = Number(number);   // No idea what thi does, added by prof
    if (isFinite(number)) {    // test what is entered is a number   
        numbers.push(number);   //add the number entered to the end of the array 
    }
    else{
        alert("Please enter a valid number");
    }
    document.getElementById("numberList").innerHTML = "The numbers you have entered so far are: " + numbers;  //diplay a list of number entered
    enterButton.textContent = "Enter your next number"; //change the label on the Enter Button
    calculateButton.style.visibility = "visible";     //show the button  - uses the CSS property of the elenment
}       
/* Calculate the sum and average of the array of number
*  Display the results on the web page
*/
function calculateAverage(){
    var average = 0;
    var total = 0;
    for (var i = 1 ; i < numbers.length; i++){    
        total = numbers[i];   //add each number in the array to the cumulative total 
    }
    average = total/i;
    document.getElementById("result").innerHTML = "The total of your numbers is " + total + " and their average is " + average;
}

function init(){
        enterButton = document.getElementById("enter");  
        calculateButton = document.getElementById("calculate");
        calculateButton.style.visibility = "hidden";    //hide the Calculate button until some numbers are entered
        enterButton.onclick = enterNumber;
        calculateButton.onclick = calculateAverage;


}

window.onload = init;

我已经使用常用的 Firefox 调试器来查找错误,但已经很晚了,但我很确定我在 for 循环的初始化语句期间与 JS 的第 35 行发生了冲突。 "numbers[i]" 在循环运行 3 次后变为未定义,导致平均值为 NaN。

很抱歉这个菜鸟问题,我觉得我在盯着它看,如果能帮我把这个学生送去睡觉,我们将不胜感激。

【问题讨论】:

  • 我猜你想做total += numbers[i];var i = 0,否则你会跳过第一个元素
  • 是的,。这就是解决方案:) @JonasW 之前没有阅读您的评论,否则我不会发布作为答案。
  • @nandita 这是一种常见的回答方式,尽管其他人已经指出了解决方案......所以请随时取消删除您的回答。

标签: javascript html arrays for-loop


【解决方案1】:

数组的索引从 0 开始,所以你应该用 var i = 0 初始化你的 for 循环

【讨论】:

    【解决方案2】:

    数组索引从 0 开始。 同时使用total += numbers[i];添加所有数字

    for (var i = 0 ; i < numbers.length; i++){    
            total += numbers[i];   //add each number in the array to the cumulative total 
        }
    

    /*
       JavaScript used with 'average.html'
    */
    
    "use strict";
    //Global variables accessible to all functions
    var numbers = []; //create an empty array
    var enterButton = null; //global variables must be initialised
    var calculateButton = null;
    
    /* Get a number from the prompt
     *  If a valid number add to array, if not give error message to user
     *  Display the updated array of numbers on the web page
     *  Make the Calculate button visible
     */
    function enterNumber() {
      var number = prompt("Enter your number");
      var number = Number(number); // No idea what thi does, added by prof
      if (isFinite(number)) { // test what is entered is a number   
        numbers.push(number); //add the number entered to the end of the array 
      } else {
        alert("Please enter a valid number");
      }
      document.getElementById("numberList").innerHTML = "The numbers you have entered so far are: " + numbers; //diplay a list of number entered
      enterButton.textContent = "Enter your next number"; //change the label on the Enter Button
      calculateButton.style.visibility = "visible"; //show the button  - uses the CSS property of the elenment
    }
    /* Calculate the sum and average of the array of number
     *  Display the results on the web page
     */
    function calculateAverage() {
      var average = 0;
      var total = 0;
      for (var i = 0; i < numbers.length; i++) {
        total += numbers[i]; //add each number in the array to the cumulative total 
      }
      average = total / i;
      document.getElementById("result").innerHTML = "The total of your numbers is " + total + " and their average is " + average;
    }
    
    function init() {
      enterButton = document.getElementById("enter");
      calculateButton = document.getElementById("calculate");
      calculateButton.style.visibility = "hidden"; //hide the Calculate button until some numbers are entered
      enterButton.onclick = enterNumber;
      calculateButton.onclick = calculateAverage;
    
    
    }
    
    window.onload = init;
    .abc {}
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <meta name="description" content="Demonstrates some logic errors" />
      <meta name="keywords" content="HTML, average, errors" />
      <meta name="author" content="997993X" />
      <title>Average numbers</title>
      <script src="badaverage.js"></script>
    </head>
    
    <body>
      <h1>Average numbers</h1>
      <p>Click the button to enter a series of numbers to average</p>
      <button id="enter">Enter your first number</button>
      <p><span id="numberList"></span></p>
      <button id="calculate">Calculate the average</button>
      <p><span id="result"></span></p>
    
    </body>
    
    </html>

    【讨论】:

      【解决方案3】:

      您的total = numbers[i]完全重新分配总数。如果要计算平均值,请添加total

      另一个问题是数组是索引的,而不是单索引的;从i = 0 开始,而不是i = 1。或者,更好的是,使用数组方法,它具有更好的抽象性并且不需要手动迭代。 forEach 是一种选择,但reduce 更适合将数组转换为单个值:

      const total = number.reduce((a, b) => a + b);
      

      /*
         JavaScript used with 'average.html'
      */
      
      "use strict";
      //Global variables accessible to all functions
      var numbers = []; //create an empty array
      var enterButton = null; //global variables must be initialised
      var calculateButton = null;
      
      /* Get a number from the prompt
       *  If a valid number add to array, if not give error message to user
       *  Display the updated array of numbers on the web page
       *  Make the Calculate button visible
       */
      function enterNumber() {
        var number = prompt("Enter your number");
        var number = Number(number); // No idea what thi does, added by prof
        if (isFinite(number)) { // test what is entered is a number   
          numbers.push(number); //add the number entered to the end of the array 
        } else {
          alert("Please enter a valid number");
        }
        document.getElementById("numberList").innerHTML = "The numbers you have entered so far are: " + numbers; //diplay a list of number entered
        enterButton.textContent = "Enter your next number"; //change the label on the Enter Button
        calculateButton.style.visibility = "visible"; //show the button  - uses the CSS property of the elenment
      }
      /* Calculate the sum and average of the array of number
       *  Display the results on the web page
       */
      function calculateAverage() {
        const total = numbers.reduce((a, b) => a + b);
        const average = total / numbers.length;
        document.getElementById("result").innerHTML = "The total of your numbers is " + total + " and their average is " + average;
      }
      
      function init() {
        enterButton = document.getElementById("enter");
        calculateButton = document.getElementById("calculate");
        calculateButton.style.visibility = "hidden"; //hide the Calculate button until some numbers are entered
        enterButton.onclick = enterNumber;
        calculateButton.onclick = calculateAverage;
      
      
      }
      
      init();
      <h1>Average numbers</h1>
      <p>Click the button to enter a series of numbers to average</p>
      <button id="enter">Enter your first number</button>
      <p><span id="numberList"></span></p>
      <button id="calculate">Calculate the average</button>
      <p><span id="result"></span></p>

      【讨论】:

      • 感谢大家的帮助,非常感谢!
      • 如果数组为空/有一个元素,我会将初始 reducer 添加为 0
      【解决方案4】:

      以下代码中的点更正

      • 数组总是从索引 0 开始。
      • 您需要在循环中将总计添加到自身,例如total = total + newNumber

      这是可行的解决方案 -

      /*
         JavaScript used with 'average.html'
      */
      
      "use strict";
      //Global variables accessible to all functions
      var numbers = [];  //create an empty array
      var enterButton = null;  //global variables must be initialised
      var calculateButton = null;
      
      /* Get a number from the prompt
      *  If a valid number add to array, if not give error message to user
      *  Display the updated array of numbers on the web page
      *  Make the Calculate button visible
      */
      function enterNumber(){
          var number = prompt("Enter your number");
          var number = Number(number);   // No idea what thi does, added by prof
          if (isFinite(number)) {    // test what is entered is a number   
              numbers.push(number);   //add the number entered to the end of the array 
          }
          else{
              alert("Please enter a valid number");
          }
          document.getElementById("numberList").innerHTML = "The numbers you have entered so far are: " + numbers;  //diplay a list of number entered
          enterButton.textContent = "Enter your next number"; //change the label on the Enter Button
          calculateButton.style.visibility = "visible";     //show the button  - uses the CSS property of the elenment
      }       
      /* Calculate the sum and average of the array of number
      *  Display the results on the web page
      */
      function calculateAverage(){
          var average = 0;
          var total = 0;
          for (var i = 0 ; i < numbers.length; i++){    
              total += numbers[i];   //add each number in the array to the cumulative total 
          }
          average = total/i;
          document.getElementById("result").innerHTML = "The total of your numbers is " + total + " and their average is " + average;
      }
      
      function init(){
              enterButton = document.getElementById("enter");  
              calculateButton = document.getElementById("calculate");
              calculateButton.style.visibility = "hidden";    //hide the Calculate button until some numbers are entered
              enterButton.onclick = enterNumber;
              calculateButton.onclick = calculateAverage;
      
      
      }
      
      window.onload = init;
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <meta name="description" content="Demonstrates some logic errors" />
        <meta name="keywords" content="HTML, average, errors" />
        <meta name="author" content="997993X"  />
        <title>Average numbers</title>
        <script src="badaverage.js"></script>
      </head>
      <body>
          <h1>Average numbers</h1>
          <p>Click the button to enter a series of numbers to average</p>
          <button id="enter">Enter your first number</button>
          <p><span id="numberList"></span></p>
          <button id="calculate">Calculate the average</button>
          <p><span id="result"></span></p>
      
      </body>
      </html>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-02-24
        • 1970-01-01
        • 1970-01-01
        • 2020-05-13
        • 1970-01-01
        • 1970-01-01
        • 2020-01-04
        • 2020-11-23
        相关资源
        最近更新 更多