使用javascript获取文本框中的数字平均值

时间：2015-05-12 04:21:26

标签： javascript

我有文本框可以提供一笔金额，我想收集金额并得到它们的平均值。有三名法官，所以这三笔钱的平均值。这是代码，它与我上一次'判断'代码相同：

<!DOCTYPE html>
<html>
<body>
<p align="right"> Dance Number:  <input type="text"size="3"></p>
<h1><ins>Judge 1</ins></h1>
<form>
<p> Technique:  <input id="txt1" type="text"size="3" min="0" max"35">     /35</p>
<p> Choreography:  <input id="txt2" type="text"size="3"min="0" max"15"> /15</p>
<p> Performance: <input  id="txt3"type="text"size="3"min="0" max"25">   /25</p>
<p> Precision:  <input id="txt4" type="text"size="3"min="0" max"15">  /15</p>
<p> Total Points: <input id="txt5"type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</br>
<h1><ins>Judge 2</ins></h1>

</form>
<form>
<p> Technique:  <input id="txt6" type="text"size="3" min="0" max"35"   onkeyup="sum();"> /35</p>
<p> Choreography:  <input id="txt7" type="text"size="3"min="0" max"15"  onkeyup="sum();"> /15</p>
<p> Performance: <input id="txt8" type="text"size="3"min="0" max"25"   onkeyup="sum();"> /25</p>
<p> Precision:  <input  id="txt9"type="text"size="3"min="0" max"15"   onkeyup="sum();"> /15</p>
<p> Total Points: <input  id="txt10"type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
<h1><ins>Judge 3</ins></h1>
</form>
<form>
<p> Technique:  <input  id="txt11"type="text"size="3" min="0" max"35">  /35</p>
<p> Choreography:  <input id="txt12" type="text"size="3"min="0" max"15">  /15</p>
<p> Performance: <input  id="txt13"type="text"size="3"min="0" max"25">  /25</p>
<p> Precision:  <input id="txt14" type="text"size="3"min="0" max"15"> /15</p>
<p> Total Points: <input id="txt15" type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</form>
<input type="submit" value="Get Score">
<p> Overall Score:</p>
<p> Award Assigned:</p>
</form>
</body>
<script>
function sum() {
   var txt1NumberValue = document.getElementById('txt1').value;
   var txt2NumberValue = document.getElementById('txt2').value;
   var txt3NumberValue = document.getElementById('txt3').value;
   var txt4NumberValue = document.getElementById('txt4').value;
   var txt6NumberValue = document.getElementById('txt6').value;
   var txt7NumberValue = document.getElementById('txt7').value;
   var txt8NumberValue = document.getElementById('txt8').value;
   var txt9NumberValue = document.getElementById('txt9').value;
   var txt11NumberValue = document.getElementById('txt11').value;
   var txt12NumberValue = document.getElementById('txt12').value;
   var txt13NumberValue = document.getElementById('txt13').value;
   var txt14NumberValue = document.getElementById('txt14').value;
   if (txt1NumberValue == "")
       txt1NumberValue = 0;
   if (txt2NumberValue == "")
       txt2NumberValue = 0;
   if (txt3NumberValue == "")
       txt3NumberValue = 0;
   if (txt4NumberValue == "")
       txt4NumberValue = 0;
   if (txt6NumberValue == "")
       txt6NumberValue = 0;
   if (txt7NumberValue == "")
       txt7NumberValue = 0;
   if (txt8NumberValue == "")
       txt8NumberValue = 0;
   if (txt9NumberValue == "")
       txt9NumberValue = 0;
   if (txt11NumberValue == "")
       txt11NumberValue = 0;
   if (txt12NumberValue == "")
       txt12NumberValue = 0;
   if (txt13NumberValue == "")
       txt13NumberValue = 0;
   if (txt14NumberValue == "")
       txt14NumberValue = 0;

   var result = 0;
   result = parseInt(txt1NumberValue) + parseInt(txt2NumberValue)+ parseInt(txt3NumberValue)+ parseInt(txt4NumberValue);
   if (!isNaN(result)) {
       document.getElementById('txt5').value = result;
   }
   result = parseInt(txt6NumberValue) + parseInt(txt7NumberValue)+ parseInt(txt8NumberValue)+ parseInt(txt9NumberValue);
   if (!isNaN(result)) {
       document.getElementById('txt10').value = result;
   }
   result = parseInt(txt11NumberValue) + parseInt(txt12NumberValue)+    parseInt(txt13NumberValue)+ parseInt(txt14NumberValue);
   if (!isNaN(result)) {
       document.getElementById('txt15').value = result;
   }
}
</script>
</html>

4 个答案:

答案 0 :(得分：0)

通过汇总值然后将它们除以不同值的数量来获得平均值。因此，在您使用4个不同值的情况下，您必须将总和除以4.

所以要获得平均值。请写下以下内容：

average = result/4;

答案 1 :(得分：0)

由于没有太多的清晰度你在尝试什么，根据你的输入，我假设你想要计算3名评委给出的分数的平均结果。 

       var *result* = parseInt(txt1NumberValue) + parseInt(txt2NumberValue)+ parseInt(txt3NumberValue)+ parseInt(txt4NumberValue);

       if (!isNaN(result)) {
           document.getElementById('txt5').value = result;
       }

       var **result1** = parseInt(txt6NumberValue) + parseInt(txt7NumberValue)+ parseInt(txt8NumberValue)+ parseInt(txt9NumberValue);
       if (!isNaN(result)) {
           document.getElementById('txt10').value = result1;
       }
       var **result2** = parseInt(txt11NumberValue) + parseInt(txt12NumberValue)+    parseInt(txt13NumberValue)+ parseInt(txt14NumberValue);
       if (!isNaN(result)) {
           document.getElementById('txt15').value = result2;
       }
    var avergage=(result+ result1 +result2)/3

答案 2 :(得分：0)

以下代码可让您的生活更轻松，并为您提供平均

JSBin for trial 

function getSum(className) {
  var result = 0;
  var classGroup = document.getElementsByClassName(className);

  for(var i =0; i < classGroup.length; (i = i + 1))
  {    
    result += parseInt((classGroup[i].value || 0), 10);
  }

  return result;

}

function sum() {    

  var result1 = getSum('jd1');
  var result2 = getSum('jd2');
  var result3 = getSum('jd3');

  console.log('sum' + result1 + '' + result2 + '' + result3);

  document.getElementById('txt5').value = result1;
  document.getElementById('txt10').value = result2;
  document.getElementById('txt15').value = result3;


  document.getElementById('avg').innerHTML = (result1 + result2 + result3)/3;  
}

下面是html代码！

<p align="right"> Dance Number:  <input type="text"size="3"></p>
<h1><ins>Judge 1</ins></h1>
<form>
<p> Technique:  <input class="jd1" id="txt1" type="text"size="3" min="0" max"35">     /35</p>
<p> Choreography:  <input id="txt2" class="jd1" type="text"size="3" min="0" max"15"> /15</p>
<p> Performance: <input  id="txt3" class="jd1" type="text"size="3" min="0" max"25">   /25</p>
<p> Precision:  <input id="txt4" class="jd1" type="text"size="3" min="0" max"15">  /15</p>
<p> Total Points: <input id="txt5"type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</br>
<h1><ins>Judge 2</ins></h1>

</form>
<form>
<p> Technique:  <input id="txt6" type="text" class="jd2" size="3" min="0" max"35"> /35</p>
<p> Choreography:  <input id="txt7" type=" class="jd2" text"size="3" min="0" max"15"> /15</p>
<p> Performance: <input id="txt8" type="text" class="jd2" size="3" min="0" max"25"> /25</p>
<p> Precision:  <input  id="txt9" class="jd2" type="text" size="3" min="0" max"15"> /15</p>
<p> Total Points: <input  id="txt10"type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
<h1><ins>Judge 3</ins></h1>
</form>
<form>
<p> Technique:  <input  id="txt11" class="jd3" type="text"size="3" min="0" max"35">  /35</p>
<p> Choreography:  <input id="txt12" type="text" class="jd3" size="3" min="0" max"15">  /15</p>
<p> Performance: <input  id="txt13" class="jd3" type="text" size="3" min="0" max"25">  /25</p>
<p> Precision:  <input id="txt14" type="text" size="3" class="jd3" min="0" max"15"> /15</p>
<p> Total Points: <input id="txt15" type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</form>
<input type="button"  onclick="sum()" value="Get Score">
<p> Overall Score:</p>
  <p> Award Assigned:<span id="avg"></span></p>
</form>

答案 3 :(得分：0)

我认为这可以帮到你：

<!DOCTYPE html>
<html>
  <body>
    <p align="right"> Dance Number:  <input type="text" size="3"></p>

    <h1><ins>Judge 1</ins></h1>
    <form class="group group1">
      <p> Technique:  <input id="txt1" type="text" class="score" size="3">     /35</p>
      <p> Choreography:  <input id="txt2" type="text" class="score" size="3"> /15</p>
      <p> Performance: <input  id="txt3" type="text" class="score" size="3">   /25</p>
      <p> Precision:  <input id="txt4" type="text" class="score" size="3">  /15</p>
      <p> Total Points: <input id="txt5" type="text" class="result" size="3">  /90</p>
      <p> Comments</p>
      <textarea name="commentsOne" cols="50" rows="5"></textarea>
      </br>
    </form>

    <h1><ins>Judge 2</ins></h1>
    <form class="group group1">
      <p> Technique:  <input id="txt6" type="text" class="score" size="3">     /35</p>
      <p> Choreography:  <input id="txt7" type="text" class="score" size="3"> /15</p>
      <p> Performance: <input  id="txt8" type="text" class="score" size="3">   /25</p>
      <p> Precision:  <input id="txt9" type="text" class="score" size="3">  /15</p>
      <p> Total Points: <input id="txt10" type="text" class="result" size="3">  /90</p>
      <p> Comments</p>
      <textarea name="commentsTwo" cols="50" rows="5"></textarea>
      </br>
    </form>

    <h1><ins>Judge 3</ins></h1>
    <form class="group group1">
      <p> Technique:  <input id="txt11" type="text" class="score" size="3">     /35</p>
      <p> Choreography:  <input id="txt12" type="text" class="score" size="3"> /15</p>
      <p> Performance: <input  id="txt13" type="text" class="score" size="3">   /25</p>
      <p> Precision:  <input id="txt14" type="text" class="score" size="3">  /15</p>
      <p> Total Points: <input id="txt15" type="text" class="result" size="3">  /90</p>
      <p> Comments</p>
      <textarea name="commentsThree" cols="50" rows="5"></textarea>
      </br>
    </form>

    <input type="submit" value="Get Score">
    <p> Overall Score:</p>
    <p> Award Assigned:</p>

    <script>

window.onload = function () {
  // Create a collection of elements that have the "group" class.  This will produce a
  // collection with your 3 forms.
  var groups = document.getElementsByClassName('group');

  // Loop through the collection and attach a handler to the "keyup" event of each <form>
  for (var i = 0, len = groups.length; i < len; i += 1) {
    groups.item(i).addEventListener('keyup', keyUpHandler);
  }
}

// This is the handler that will fire whenever a <form> receives a "keyup" event.  It
// takes a single parameter - the "event object" which holds information about the event
// such as which key was pressed, or which mouse button was clicked.
// You can find out more about the event object here:
// https://developer.mozilla.org/en-US/docs/Web/API/Event
// The handler also has a "this" parameter, which refers to the <form> that received the
// "keyup" event.  If we call "this.getElementsByClassName('score')", it will return only the
// elements that have the class "score" *AND* are inside the <form> that received the
// event.  This makes calculating each judge's score much easier.
function keyUpHandler (e) {
  // Create a collection, similar to the "groups" collection
  var scores = this.getElementsByClassName('score');
  var sum = 0;
  var score;

  // Loop through all the scores in the collection and add them together
  for (var i = 0, len = scores.length; i < len; i += 1) {
    score = parseInt(scores.item(i).value) || 0;
    sum += score;
  }

  // Update the form with the new sum, in the "result" textbox.
  this.getElementsByClassName('result').item(0).value = sum;
}
    </script>
  </body>
</html>

一些注意事项：

  1. <input type="text">没有min或max属性。这些是<input type="number">，您可能想要使用它们。
  2. 您的max属性大部分都缺少=运算符，因此即使它们已附加到<input type="number">
    3. 也会被忽略
  3. 尽量不要使用id提供您想要使用的每个对象。这是一种反模式，会产生像你的例子一样的代码，这可能是一个难以维护的噩梦。支持class s id s
  4. 您有一个额外的</form>没有开放<form>标记。保持代码整洁和正确缩进可以帮助避免这样的问题。
  5. 你有第一个＆＃34;法官1＆＃34;在相应的表格之外标题，然后你在后面的表格结尾处的后续标题？这可能会让人感到困惑。一致性很重要。
  6. 您不需要将处理程序附加到每个<input>元素（您通过... onkeyup="sum()"执行的操作）。您可以将单个处理程序附加到<form>元素本身。这称为Event Delegation，是一个非常有用的理解。

  7. 添加＆＃34;平均值＆＃34;功能，您需要在HTML中多次使用此行：

    1. <p> Average: <input type="text" class="average" size="3"></p>

      2. 以及keyUpHandler函数中的这些行：

      1. this.getElementsByClassName('average').item(0).value = average;
      2. var average;
      3. average = sum / scores.length;

        4. 我告诉你确定在哪里：）

相关问题
最新问题