Question

当前，我必须在一个简单的网站上工作，该网站从用户那里获取三个值，将它们加起来并提供平均值。讲师帮我整理了这些内容，但今晚完成了整理工作，我无法得出平均值。

这是我的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之后变得不确定。

对于菜鸟的问题，我感到很抱歉，我好像正盯着它，如果能帮助这位学生上床睡觉，将不胜感激。

Answer 1

数组的索引从0开始，因此您应该使用var i = 0

初始化for循环

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

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

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

初学者JavaScript数组问题

4 个答案: