HTML/Javascript....working with arrays, loops, and conditional statements.?

S

seeminglylost

New member
I am working on a homework assignment and I can't figure out for the life of my WHY it won't work! It is supposed to create a bar chart based on information on political candidates and the amount of votes they got and it does nothing. The book I am using is horrible and I have been looking at this for the last 7 hours and can't see where my errors are. Please...can someone please take a look at what I have and make some recommendations based on what I coded??

Code: 
<title>Congressional Races</title>
<link href="images/results.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="votes.js"></script>
<script type="text/javascript">  // script element to add the votes.js

function totalVotes(votes){ // script element that will calculate the array
 var total = 0; 
 for (var i = 0; i < votes.length; i++)
 {
      total = total + votes[i];
 } 
 return total;
}
   
function calcPercent(item,sum){ // script element to calculate the percentage which is rounded to the nearest integer        
        var item = Math.round((item/sum))*100);  // script element to get the percentage
        return item;    
    }    
    // calcPercent();
        
        

    function createBar(partyType,percent){ // script element to create blank cells
        switch(partyType) {
            case D: <td class='dem'></td>
            break;
            case R:  <td class='rep'></td>
            break;
            case I: <td class='ind'></td>
            break;
            case G: <td class='green'></td>
            break;
            case L: <td class='lib'></td>
            break;
}
        var barTxt = partyType;

        for (i=0; i < percent; i++){
            document.write(barText);
}

        } 

function showResults(race,name,party,votes){ // script element to display the results of a particular race
            var totalIV = totalVotes(votes);  
            document.write("<h2>"  + race + "</h2>");
            document.write("<table cellspacing='0'>");
            document.write("<tr>");
            document.write("<th>Canidate</th>");
            document.write("<th class ='num'>Votes</th>");
            document.write("<th class='num'>%</th>");
            document.write("</tr>");
            
    
        for (var i=0; i < name.length; i++){
            document.write("<tr>");
            document.write("<td>" name[i] + "(" + party[i] + ")</td>");
            document.write("td class='num'>" + votes[i] + "</td>");
        
            var percent=calcPercent(votes[i], totalV) 

            document.write("<td class='num'>(" + percent +"%)</td>"); 

            createBar(party[i],percent)
            document.write("</tr>");
            }
            document.write("</table>");
}
</script>
  
</head>

<body>

<div id="intro">
<p><img src="images/logo.jpg" alt="Election Day Results"/></p>
<a href="#">President</a>
<a href="#">Senate Races</a>
<a href="#">Congressional Races</a>
<a href="#">State Senate</a>
<a href="#">State House</a>
<a href="#">Local Races</a>
<a href="#">Judicial</a>
<a href="#">Referendums</a>
</div>

<div id="results">
<h1>Congressional Races</h1>
<script type="text/javascript">
        showResults(race[0],name1,party1,votes1);
        showResults(race[1],name2,party2,votes2);
        showResults(race[2],name3,party3,votes3);
        showResults(race[3],name4,party4,votes4);
        showResults(race[4],name5,party5,votes5);    
    </script>       
</div>

</body>
</html>

This is the javascript that goes with this code:

Code: 
Filename: votes.js

   Variable List:

   races:           The name of the five races
   name1 - name5:   The name of the candidate for races 1 through 5
   party1 - party5: The party affliations of the candidates
   votes1 - votes5: The number of votes the candidate has received

*/

var race = new Array();

var name1  = new Array();
var name2  = new Array();
var name3  = new Array();
var name4  = new Array();
var name5  = new Array();

var party1  = new Array();
var party2  = new Array();
var party3  = new Array();
var party4  = new Array();
var party5  = new Array();

var votes1  = new Array();
var votes2  = new Array();
var votes3  = new Array();
var votes4  = new Array();
var votes5  = new Array();


race[0]="1st Congressional District";
race[1]="2nd Congressional District";
race[2]="3rd Congressional District";
race[3]="4th Congressional District";
race[4]="5th Congressional District";

name1[0]="Sarah Carlson";
party1[0]="D";
votes1[0]=45125;
name1[1]="Pete deJesus";
party1[1]="R";
votes1[1]=44498;
name1[2]="Alan Tompkins";
party1[2]="I";
votes1[2]=5143;

name2[0]="Gary Griffin";
party2[0]="D";
votes2[0]=69505;
name2[1]="Frank Brown";
party2[1]="R";
votes2[1]=78133;
name2[2]="Roland Washington";
party2[2]="G";
votes2[2]=8109;
name2[3]="Karen Rees
 
WOW! And this is homework? I remember that Some words require Capitals rather than lower case. Example - bgcolor does not always work. BgColor or BGCOLOR are the preferred to work in all browsers.

Also, maybe you do not have Javascript enabled. In Internet Options > Advanced. Even working offline it still has to be enabled.

The only thing I've seen so far is a semi-colon missing

<CODE>

function totalVotes(votes){ // script element that will calculate the array
var total = 0;
for (var i = 0; i < votes.length; i++) << here is missing semi-colon
{
total = total + votes;
}
return total;

Maybe you need quote marks rather than Apostrophes

case D: <td class='dem'></td>

case D: <td class="dem"></td>

</CODE>
 
Back
Top