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

时间:2019-02-19 04:27:30

标签: javascript html

我有一个分数文本字段,用户必须输入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;
};

5 个答案:

答案 0 :(得分:2)

您的数组接收的是字符串而不是数字。在进行数学运算之前,必须使用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);
    }
}

答案 1 :(得分:1)

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

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);函数中的
  1. addScore,以便在进行任何比较之前先将值转换为Integer。
  2. var average = total/(scores.length);中的
  3. displayResults使其清晰可见。
  4. "<h2>Results </h2><br>Average Score = "+average+;清理为正确且干净的版本。请注意,您最后有一个+

答案 2 :(得分:0)

您没有定义$(...)函数,所以我想它是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">

答案 3 :(得分:0)

您的代码中有几个问题:

  1. scoreInput 是字符串类型。您必须将其转换为数字才能执行实际的算术运算。

  2. 您错过了选择器中的 id class 符号(#,.)。

  3. 使用jQuery时,您必须使用val()而不是value之类的$("#score").val()

  4. 类似地,$("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>

答案 4 :(得分:0)

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

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

var average = scores.reduce((a,b)=>a+b) / scores.length;

console.log ( average );