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

我有文本框给出了一笔款项，我想收集总和并获得平均值。有三位评委是这三位总和的平均值。这里是代码，它是一样的我最后的“判断”代码：使用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>

来源

2015-05-12 retrogirl19

[DRY！（http://en.wikipedia.org/wiki/Don%27t_repeat_yourself） – undefined

什么错误你会得到什么？你想得到什么平均值？ – F11

@ retrogirl19 - 接受答案，如果你找对了 – wallop

，我认为这可以帮助你：

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

的几个注意事项：

<input type="text">没有min或max属性。这些用于<input type="number">，您可能想要使用它们。
你max属性大多缺少=运营商，因此会即使他们已经连接到<input type="number">
尽量不要给每一个对象，你想用id工作都被忽略。这是一种反模式，并导致像您的示例一样的代码，这可能是一个噩梦来维护。 Favor class es over id s
您有一个额外的</form>没有开放<form>标记。保持你的代码整洁和缩进可以帮助避免这样的问题。
你有你的第一个“法官1”标题以外的相应表格，然后你的后续标题在前面的表格？这可能会让人感到困惑。一致性很重要。
你不需要附加一个处理程序给每个人<input>元素（你正在做的... onkeyup="sum()"）。您可以将单个处理程序附加到<form>元素本身。这被称为Event Delegation，是一个非常有用的理解。
要添加一个 “平均” 功能，您将需要此线在你的HTML几次：
1. <p> Average: <input type="text" class="average" size="3"></p>
和这些行keyUpHandler功能：
1. this.getElementsByClassName('average').item(0).value = average;
2. var average;
3. average = sum/scores.length;
我把它留给你，以确定:)

来源

2015-05-12 05:15:24

这非常有帮助！谢谢！ – retrogirl19

太好了 - 我很乐意帮忙。你愿意接受我的回答吗？ –

您通过汇总值，然后将它们除以不同值的数量得到的平均值。所以在你的情况下，有4个不同的值，你必须除以4.

所以得到平均。只是写：

average = result/4;

来源

2015-05-12 04:26:39

由于没有太多清晰什么是你想，根据你的投入，我想你要计算由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

来源

2015-05-12 04:43:41 F11

下面的代码将使乌尔生活更轻松，还为您提供了平均

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>

来源

2015-05-12 05:01:16 wallop

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

回答

相关问题