Simple percentage of 2 numbers script

@HDCAug 08.2008

I simply would like to get the percentage of 2 numbers.

I can dynamically pull both numbers into input boxes. I would then need a third box to calculate the percentage between the two boxes.

Example:

total = 6
field = 2
Percentage = 33%

I have this code:
<input type=text value= name=”Total1″>
<input type=text value= name=”Dr1″>
<input type=text value= name=”Percentage1″>

I could have several instances or categories of this above on the same page.

thanks.

to post a comment

JavaScript

12 Comments(s) _↴

@toicontienAug 08.2008 — #Are they in separate forms, or all mashed together in one form?

@scragarAug 08.2008 — #HTML:

[code=html]<div class='perFinder'>
 <input type='text' class='perTot' value='' name="Total1">
 <input type='text' class='perVal' value='' name="Dr1">
 <input type='text' class='perPer' value='' name="Percentage1">
 </div>[/code]

javascript(essential function which uses that doesn't work in the forums php tags(which give pretty colours)):

// for safari
 Document = document.constructor; HTMLElement = document.createElement("x").constructor;
 // for all browsers
 Document.prototype.getElementsByClassName = HTMLElement.prototype.getElementsByClassName = function(searchClass, tag){
 var classElements = new Array();
 if(tag == null)
 tag = '*';
 var els = this.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
 for(var i = 0; i &lt; elsLen; i++){
 if(pattern.test(els[i].className)){
 classElements.push(els[i]);
 }
 }
 return classElements;
 }

Javascript(that doesn't use and thus can look pretty):

[code=php]window.addEvent = HTMLElement.prototype.addEvent = function(type, fn){
 if(this.addEventListener){
 this.addEventListener(type, fn, false);
 }else
 if(this.attachEvent){
 obj.attachEvent("on"+type, fn);
 }else{
 obj["on"+type] = fn;
 };
 };
 
 function setPercentages(){
 var i, j, perPer, perTot, perVal, perSets = document.getElementsByClassName('perFinder');
 for(i = perSets.length -1; i >=0; i--){
 perPer = perSets[i].getElementsByClassName('perPer')[0];
 perVal = perSets[i].getElementsByClassName('perVal')[0];
 perTot = perSets[i].getElementsByClassName('perTot')[0];
 j = Math.round(100 * parseInt(perVal.value, 10) / parseInt(perTot.value, 10));
 if(isNaN(j)){
 perPer.value = '';
 }else{
 perPer.value = j+'%';
 };
 };
 };
 window.addEvent('load', function(){
 window.setInterval(setPercentages, 1000);
 });
 
 [/code]

updates every second, it's possible to get it to update more or less often, don't set the rate too high though, CPU usage can be intensive with large forms and such loops.

@mrhooAug 08.2008 — #<script type="text/javascript">

[CODE]window.onload=function(){
 var whosit=function(who,i){
 if(typeof i !='number') return document.getElementsByName(who).length;
 return document.getElementsByName(who)[i];
 }
 //x is the number of sets of inputs named'Total','Dr' and 'Percentage'
 var x= whosit('Dr');
 while(x>0){
 --x;
 if(whosit('Total',x) && whosit('Percentage',x)){
 whosit('Dr',x).onchange= function(x){
 var n= parseFloat(whosit('Total',x).value);
 var d= parseFloat(whosit('Dr',x).value);
 if(n && d) whosit('Percentage',x).value=(100/(n/d)).toFixed(2)+'%';
 }
 }
 }
 }
 [/CODE]

</script>

@Ay__351_eAug 09.2008 — #

 <br/>
 &lt;script type="text/javascript"&gt;
 
 function f(){
 var t=document.getElementById('Total1');
 var d=document.getElementById('Dr1');
 var p=document.getElementById('Percentage1');
 p.value=((d.value/t.value).toFixed(2)) *100 +"%";
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="text" value="6" name="Total1" id="Total1"&gt;
 &lt;input type="text" value="2" name="Dr1" id="Dr1"&gt;
 &lt;input type="button" value="calculate" onclick="f()"&gt;
 &lt;input type="text" value="" name="Percentage1" id="Percentage1" readonly="true"&gt;

@HDCauthorAug 11.2008 — #Ayşe this is great but how can I calculate it automatically without hitting the calculate button? window onload?

Also is it possible to have many input boxes creating the pecentage?

ex:

var a=document.getElementById('a1');

var b=document.getElementById('b1');

var c=document.getElementById('c1');

@Ay__351_eAug 11.2008 — #

 <br/>
 &lt;script type="text/javascript"&gt;
 
 function f(bu){
 bu.value=bu.value.replace(/D+/,""); // if character is not a number, delete it.
 //alert(bu.id);
 var num= bu.id.replace(/D/,""); // number of id
 var letter=bu.id.replace(/d/,""); // letter of id
 // alert(num);
 // alert(letter);
 var a=document.getElementById('a'+num); // total
 var b=document.getElementById('b'+num);  // 
 var c=document.getElementById('c'+num); // percentage
 c.value=Math.floor((b.value/a.value) *100 )+"%";
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;a1, b1, c1 &lt;br&gt;
 &lt;input type="text" value="6" name="a1" id="a1" onkeyup="f(this)"&gt;
 &lt;input type="text" value="2" name="b1" id="b1" onkeyup="f(this)"&gt;
 &lt;input type="text" value="" name="c1" id="c1" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 a2, b2, c2 &lt;br&gt;
 &lt;input type="text" value="" name="a2" id="a2" onkeyup="f(this)"&gt;
 &lt;input type="text" value="" name="b2" id="b2" onkeyup="f(this)"&gt;
 &lt;input type="text" value="" name="c2" id="c2" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 
 a3, b3, c3 &lt;br&gt;
 &lt;input type="text" value="" name="a3" id="a3" onkeyup="f(this)"&gt;
 &lt;input type="text" value="" name="b3" id="b3" onkeyup="f(this)"&gt;
 &lt;input type="text" value="" name="c3" id="c3" readonly="true"&gt;&lt;br&gt;&lt;br&gt;

window.onload

 <br/>
 &lt;script type="text/javascript"&gt;
 
 function f(bu){ 
 bu.value=bu.value.replace(/D+/,""); 
 var num= bu.id.replace(/D/,""); // number of id
 var letter=bu.id.replace(/d/,""); // letter of id
 var a=document.getElementById('a'+num); // total
 var b=document.getElementById('b'+num);  // oran
 var c=document.getElementById('c'+num); // percentage
 c.value=Math.floor((b.value/a.value) *100 )+"%";
 }
 
 window.onload=function (){
 var i=1, a,b;
 while(a=document.getElementById('a'+(i++))) {
 b=document.getElementById('b'+(i-1));
 a.onkeyup = b.onkeyup = function(){ f(this);}
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;&lt;br&gt;
 a1, b1, c1 &lt;br&gt;
 &lt;input type="text" value="6" name="a1" id="a1" &gt;
 &lt;input type="text" value="2" name="b1" id="b1" &gt;
 &lt;input type="text" value="" name="c1" id="c1" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 a2, b2, c2 &lt;br&gt;
 &lt;input type="text" value="" name="a2" id="a2" &gt;
 &lt;input type="text" value="" name="b2" id="b2" &gt;
 &lt;input type="text" value="" name="c2" id="c2" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 
 a3, b3, c3 &lt;br&gt;
 &lt;input type="text" value="" name="a3" id="a3" &gt;
 &lt;input type="text" value="" name="b3" id="b3" &gt;
 &lt;input type="text" value="" name="c3" id="c3" readonly="true"&gt;&lt;br&gt;&lt;br&gt;

@HDCauthorAug 12.2008 — #Ayşe thank for the help. The top one does work however the windows.onload does not unless I add a number into one of the boxes.

Best case scenario is when the window loads it calculates the % box.

@Ay__351_eAug 12.2008 — #c=document.getElementById('c'+(i-1));

c.value=Math.floor((b.value/a.value) *100 )+"%";

when the window loads, it calculates the % box.

 <br/>
 &lt;script type="text/javascript"&gt;
 
 function f(bu){ 
 bu.value=bu.value.replace(/D+/,""); 
 var num= bu.id.replace(/D/,""); // number of id
 var a=document.getElementById('a'+num); // total
 var b=document.getElementById('b'+num);  // oran
 var c=document.getElementById('c'+num); // percentage
 c.value=Math.floor((b.value/a.value) *100 )+"%";
 }
 
 window.onload=function (){
 var i=1, a,b,c;
 while(a=document.getElementById('a'+(i++))) {
 b=document.getElementById('b'+(i-1));
 c=document.getElementById('c'+(i-1));
 c.value=Math.floor((b.value/a.value) *100 )+"%";
 a.onkeyup = b.onkeyup = function(){ f(this);}
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;&lt;br&gt;
 a1, b1, c1 &lt;br&gt;
 &lt;input type="text" value="6" name="a1" id="a1" &gt;
 &lt;input type="text" value="2" name="b1" id="b1" &gt;
 &lt;input type="text" value="" name="c1" id="c1" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 a2, b2, c2 &lt;br&gt;
 &lt;input type="text" value="100" name="a2" id="a2" &gt;
 &lt;input type="text" value="40" name="b2" id="b2" &gt;
 &lt;input type="text" value="" name="c2" id="c2" readonly="true"&gt;&lt;br&gt;&lt;br&gt;
 
 a3, b3, c3 &lt;br&gt;
 &lt;input type="text" value="120" name="a3" id="a3" &gt;
 &lt;input type="text" value="30" name="b3" id="b3" &gt;
 &lt;input type="text" value="" name="c3" id="c3" readonly="true"&gt;&lt;br&gt;&lt;br&gt;

@HDCauthorAug 12.2008 — #Ayşe, yes that is perfect. Thank you so much for the help!

@HDCauthorAug 13.2008 — #Ayşe, I have ran into a rounding error. Since it does not show a decimal point it does not round.

I found in the script:

1 of 6 = 16%

Which really its 16.6 and I need it rounded to 17.

Is it possible to round up when appropriate without showing decimal places?

Thanks for the help

@Ay__351_eAug 13.2008 — #c.value=Math.[COLOR="Red"][B]round[/B][/COLOR]((b.value/a.value) *100 )+"%";

or

c.value=Math.[COLOR="Red"][B]ceil[/B][/COLOR]((b.value/a.value) *100 )+"%";

It will round.

If you want a decimal places, try

c.value=((b.value/a.value) *100 ).[COLOR="Red"][B]toFixed(2)[/B][/COLOR]+"%";

http://www.w3schools.com/JS/js_obj_math.asp

http://www.w3schools.com/jsref/jsref_ceil.asp

@HDCauthorAug 13.2008 — #Ayşe, that was it! Thank you very much!

Also in #JavaScript _↴

onClick event in 'img'problem formatting call to window.open()Browser Save As

Success!

Help @HDC spread the word by sharing this article on Twitter...

Tweet This

Simple percentage of 2 numbers script

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Simple percentage of 2 numbers script

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴