How do you calculate percentages in Javascript?

NKeuxmuis · 04-12-2011, 10:31 PM

Can anyone help me with the following Javascript. I am going crazy trying to figure this out because it should be easy. Basically I want to calculate the percentage of a number, but I'm getting a really weird result. In the following code f is equal to 3 and x.length is equal to 8. The part that isn't working is emphasised in bold. Basically 3/8 * 100 should result in 37.5 but the result I am getting with the following code is 7934570.3125. How do you calculate this percentage in Javascript?

Code:

function displaymember()
{
var m = 1;
var f = 1;
for(i=0;i<x.length;i++)
 {
 
	sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);

if (sex=="Male")
  {
  m++;
  }
else
  {
  f++;
  }

percent=f/x.length * 100

document.getElementById("fixed").innerHTML=percent;
   }
}

bullant · 04-12-2011, 11:56 PM

For debugging add the alert in red and your error should become clear.

Code:

alert(f+'   '+x.length);

percent=f/x.length * 100

NKeuxmuis · 04-13-2011, 12:04 AM

Hi, thanks for the reply

I tried what you said but I am still none the wiser on why I am getting this error. That code you told me just said the values were 3 and 8 which I already knew they would be.

bullant · 04-13-2011, 12:16 AM

There must be something else going on in your code that you haven't posted.

In this demo, the output in the alert() is 37.5

Code:

        
<script type="text/javascript">
            function displaymember(){
                var x = [1,2,3,4,5,6,7,8];
                
                var f=3;

                percent=f/x.length * 100;

                alert(percent);
            }
            displaymember();
</script>

NKeuxmuis · 04-13-2011, 02:01 AM

Thanks for your reply, I did cut out some code because I thought it was irrelevant and would be confusing for those who didn't write it. Here is the full code which basically uses Javascript to open an XML file. The displaymember function is then supposed to count how many males/females are in the xml file and display the number of females as a percentage. The code seems to work perfectly when I checked it until I get to the "percent=f/x.length * 100" part. That is where everything goes wrong.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript"> 
 
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
 
xml=loadXMLDoc("dating_database.xml");
 
x=xml.getElementsByTagName("client");
  
function displaymember()
{
var m = 1;
var f = 1;
for(i=0;i<x.length;i++)
 {
 
	sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);

if (sex=="Male")
  {
  m++;
  }
else
  {
  f++;
  }

percent=f/x.length * 100

document.getElementById("fixed").innerHTML=percent;

   }
}
  
</script>

</head>

<body onload="displaymember()">

<div id="fixed"> 

</div>

</body>

</html>

bullant · 04-13-2011, 04:24 AM

Looking at your code, it appears your xml file structure is something like this

Code:

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <client>
        <sex>Male</sex>
    </client>
    <client>
        <sex>Female</sex>
    </client>
    <client>
        <sex>Male</sex>
    </client>
</root>

I named the above test file testXML.xml in the demo below.

The demo below, based on your posted code but with a couple of "tweaks", works fine with the above xml data and outputs 33.33 as the percentage female.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            function loadXMLDoc(dname){
                if (window.XMLHttpRequest){
                    xhttp=new XMLHttpRequest();
                } else {
                    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhttp.open("GET",dname,false);
                xhttp.send("");
                return xhttp.responseXML;
            }

            xml=loadXMLDoc("testXML.xml");

            function displaymember(){
                var oClients = xml.getElementsByTagName("client");
                var m = 0;
                var f = 0;
                for(i=0;i < oClients.length;i++) {
                    sex=(oClients[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
                    if (sex=="Male"){
                        m++;
                    } else {
                        f++;
                    }
                }
                document.getElementById("fixed").innerHTML = (f/ oClients.length * 100).toFixed(2);
            }
            window.onload=displaymember;
        </script>
    </head>
    <body>
        <div id="fixed"></div>
    </body>
</html>

NKeuxmuis · 04-13-2011, 05:01 PM

Thanks Bullant that worked perfectly, you are a lifesaver. I'm completely new to Javascript and this helped me accomplish what I was trying to achieve

bullant · 04-13-2011, 11:35 PM

you're welcome