Getting Averages of numbers in textboxes using javascript -
i have textboxes gives sum , want collect sums , average on them. there 3 judges average of 3 sums. here code, same last 'judging' code:
<!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>
i think can you:
<!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 collection of elements have "group" class. produce // collection 3 forms. var groups = document.getelementsbyclassname('group'); // loop through collection , attach handler "keyup" event of each <form> (var = 0, len = groups.length; < len; += 1) { groups.item(i).addeventlistener('keyup', keyuphandler); } } // handler fire whenever <form> receives "keyup" event. // takes single parameter - "event object" holds information event // such key pressed, or mouse button clicked. // can find out more event object here: // https://developer.mozilla.org/en-us/docs/web/api/event // handler has "this" parameter, refers <form> received // "keyup" event. if call "this.getelementsbyclassname('score')", return // elements have class "score" *and* inside <form> received // event. makes calculating each judge's score easier. function keyuphandler (e) { // create collection, similar "groups" collection var scores = this.getelementsbyclassname('score'); var sum = 0; var score; // loop through scores in collection , add them (var = 0, len = scores.length; < len; += 1) { score = parseint(scores.item(i).value) || 0; sum += score; } // update form new sum, in "result" textbox. this.getelementsbyclassname('result').item(0).value = sum; } </script> </body> </html> a few notes:
<input type="text">not haveminormaxattributes.<input type="number">may want use instead.- your
maxattributes missing=operator, , hence have been ignored if had been attached<input type="number"> - try not give every object want work
id. anti-pattern , results in code example, can nightmare maintain. favourclasses onids - you had
</form>without opening<form>tag. keeping code tidy , indented can avoid problems this. - you had first "judge 1" heading outside corresponding form, subsequent headings @ end of preceeding forms? confusing. consistency important.
- you don't need attach handler every individual
<input>element (which doing... onkeyup="sum()"). can attach single handler<form>element itself. called event delegation , helpful thing understand. to add "average" feature, need line few times in html:
<p> average: <input type="text" class="average" size="3"></p>
and these lines in
keyuphandlerfunction:this.getelementsbyclassname('average').item(0).value = average;var average;average = sum / scores.length;
i leave determine :)
Comments
Post a Comment