Question

我有一个分数文本字段，用户必须输入0到100之间的数字才能添加到数组中。显示结果后，应计算数组中数字的平均值。但是，每当我输入一个数字时，平均值就完全不值了而且非常高。我该如何解决？（例如array [88，98，77，88]并输入数字99，则平均值跳至7039）

我的代码：

var scores = [88, 98, 77, 88];

var addScore = function() {
  var scoreInput = $("score").value;
  if (scoreInput.length == 0 || scoreInput > 100 || scoreInput < 0 || isNaN(scoreInput)) {
    alert("You must enter a valid score.");
  } else {
    scores.push(scoreInput);
  }
}

var displayResults = function() {
  var highest = Math.max(...scores);
  var total = 0;

  for (var i = 0; i < scores.length; i++) {
    total += scores[i];
  }
  var average = total / scores.length;

  var output = "<h2>Results </h2><br>Average Score = " + average + ;
  $("results").innerHTML = output;
};

Answer 1

您的数组接收的是字符串而不是数字。在进行数学运算之前，必须使用parseInt或parseFloat将用户输入转换为数字。

var addScore = function () {
    var scoreInput = $("#score").value; // or ".score"
    scoreInput = parseFloat(scoreInput); // here. If not valid, returns NaN.
    if (scoreInput > 100 || scoreInput < 0 || isNaN(scoreInput)) {
        alert("You must enter a valid score.");
    } else {
        scores.push(scoreInput);
    }
}

Answer 2

尝试将您的代码更改为此：

var scores = [88, 98, 77, 88];

var addScore = function () {
    var scoreInput = $("score").value;
    scoreInput = parseInt(scoreInput);
    if (scoreInput.length == 0 || scoreInput > 100 || scoreInput < 0 || isNaN(scoreInput)) {
        alert("You must enter a valid score.");
    } else {
        scores.push(scoreInput);
    }
}

var displayResults = function (){
    var highest = Math.max(...scores);
    var total = 0;

    for(var i = 0; i < scores.length; i++)
    {
        total += scores[i];
    }
    var average = total/(scores.length);

    var output = "<h2>Results </h2><br>Average Score = " + average ;
    $("results").innerHTML = output;
};

应该可以。

所做的更改：

scoreInput = parseInt(scoreInput);

addScore，以便在进行任何比较之前先将值转换为Integer。

var average = total/(scores.length);

displayResults使其清晰可见。
将"<h2>Results </h2><br>Average Score = "+average+;清理为正确且干净的版本。请注意，您最后有一个+！

Answer 3

您没有定义$（...）函数，所以我想它是jquery。我为您修复了一些代码：

将var scoreInput = $("score").value更改为$(".score")[0].value;（这将读取“ .score”类的输入并将其转换为数字）
将$(".results").innerHTML更改为$(".results")[0].innerHTML
简化addScore中的if语句

var scores = [88, 98, 77, 88];

var addScore = function () {
    var scoreInput = +$(".score")[0].value;

    if (isNaN(scoreInput) || scoreInput > 100) {
        alert("You must enter a valid score.");
    } else {
        scores.push(scoreInput);
        displayResults();
    }
}

var displayResults = function (){
    var highest = Math.max(...scores);
    var total = 0;
    
    for(var i = 0; i < scores.length; i++)
    {
        total += scores[i];
    }
    var average = total /scores.length;

    var output = "<h2>Results </h2><br>Average Score = "+average;
    
    $(".results")[0].innerHTML = output;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="score" type="number">
<button onclick="addScore()">add</button>

<div class="results">

Answer 4

您的代码中有几个问题：

scoreInput 是字符串类型。您必须将其转换为数字才能执行实际的算术运算。
您错过了选择器中的 id 或 class 符号（#,.）。
使用jQuery时，您必须使用val()而不是value之类的$("#score").val()。
类似地，$("results").innerHTML = output;应该是$("#results").html(output);

尝试以下方式：

var scores = [88, 98, 77, 88];

var addScore = function () {
    var scoreInput = $("#score").val().trim();
    if (!scoreInput || scoreInput > 100 || scoreInput <= 0 || isNaN(scoreInput)) {
        alert("You must enter a valid score.");
        $("#score").val($("#score").val().slice(0, -1)); // Remove the last character
    } else {
        scores.push(Number(scoreInput));
        displayResults();
    }
}

var displayResults = function (){
    var highest = Math.max(...scores);
    var total = 0;
    
    for(var i = 0; i < scores.length; i++)
    {
        total += scores[i];
    }
    var average = total /scores.length;
    var output = "<h2>Results </h2><br>Average Score = "+average;
    $("#results").html(output);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="score" oninput="addScore()">

<div id="results"></div>

Answer 5

但是，平均值的计算没有向导...

var scores = [88, 98, 77, 88];

var average = scores.reduce((a,b)=>a+b) / scores.length;

console.log ( average );

用户在数组中输入另一个数字后，计算数组的平均值

5 个答案: