Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How do you calculate percentages in Javascript?

    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;
       }
    }

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    For debugging add the alert in red and your error should become clear.

    Code:
    alert(f+'   '+x.length);
    
    percent=f/x.length * 100

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  • Users who have thanked bullant for this post:

    NKeuxmuis (04-13-2011)

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •