Vynce82 Vynce82 - 1 month ago 7
Javascript Question

Javascript generated table not working

Can anyone spot an obvious error? Why is this Javascript generated table (

showResults
function) not showing up in my html? This always happens when I have a lot of literal values to quote...I'd appreciate any other comments on my formatting (white-space) as well!

<script type="text/javascript">
//calculates sum of all values within an array
function totalVotes(votes){ /
var total=0;
for (i=0;i<votes.length;i++){
total = votes[i] + total;
}
return total;
}
//calculates a percentage, rounded to nearest integer
function calcPercent(item, sum){
return Math.round((item/sum)*100);
}
//tests value of partyType parameter
function createBar(partyType, percent){
switch (partyType){
case D: barText="<td class='dem'></td>";
break;
case R: barText="<td class='rep'></td>";
break;
case I: barText="<td class='ind'></td>";
break;
case G: barText="<td class='green'></td>";
break;
case L: barText="<td class='lib'></td>";
break;
}
for(i=1;i<=percent;i++){
document.write(barText);
}
}
function showResults(race,name,party,votes){
var totalV=function totalVotes(votes);

document.write("<h2>" +race+ "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class='num'> Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");

for (r=0;r<name.length;r++){
document.write("<tr>");
document.write("<td>"+name[i]+ '(' +party[r]+ ")" +"</td>");
document.write("<td class='num'>" +votes[r]+ "</td>");

var percent=function calPercent(votes[r],totalV)
document.write("<td class='num'>(" +percent[r]+ "%)</td>");
createBar(party[r], percent);
document.write("</tr>");
}
document.write("</table>");
}



Answer

There were many issues with your code:

  1. Random slash after your opening brace to the totalVotes function

  2. Declaring a variable without var with your for-loops (this wouldn't break your code but it isn't a good idea to do it)

  3. As others stated, incorrect use of the switch statement (non-numeric characters need to be in quotes)

  4. As Fabrizio Calderan stated, barText isn't set properly. It will work but it is very bad practice. Declare it first before the switch.

  5. The for-loop in createBar will not work based on what you are passing to it. You pass an array as the value of percent in the for-loop inside showResults but then treat it like it is a number by comparing it to a number. You want percent.length in the for-loop instead.

  6. Incorrect method of accessing a function. var totalV=function totalVotes(votes); is invalid and will not work. Alternatively use var totalV=totalVotes(votes); or if you don't want to use that, var totalV=totalVotes.call(null, votes); (Though you have no need to use the .call property in your code)

  7. Another error inside your for-loop in the showResults function. var percent=function calPercent(votes[r],totalV) has both the issue as my #6 point with accessing a function incorrectly as well as that function does not actually exists due to a misspelling. Pretty sure you mean var percent=calcPercent(votes[r],totalV).

  8. I'm not a fan of the document.write method and haven't used it for a LONG time. I personally avoid it at all costs due to how it works / where it writes. Also as Fabrizio suggested, innerHTML is a much better option.

Overall, the code is clean and mostly works but I feel like you didn't even attempt to run the code with a debugger enabled. Both Firefox and Chrome have a decent native debugger and would spot these errors.

With that said though, I have fixed up your code with these issues. There are still a handful of other changes that could be done to make the code nicer/smaller/simpler but I think this will do for now.

<script type="text/javascript"> 
    //calculates sum of all values within an array
    function totalVotes(votes)
    {
        var total=0;
        for (var i=0; i < votes.length; i++){
            total = votes[i] + total;
        }
        return total;
    }
    //calculates a percentage, rounded to nearest integer
    function calcPercent(item, sum)
    {
        return Math.round((item/sum)*100);
    }
    //tests value of partyType parameter        
    function createBar(partyType, percent)
    {
        var barText = null;
        switch (partyType)
        {
            case 'D':  barText="<td class='dem'></td>";
            break;
            case 'R':  barText="<td class='rep'></td>";
            break;
            case 'I':  barText="<td class='ind'></td>";
            break;
            case 'G':  barText="<td class='green'></td>";
            break;
            case 'L':  barText="<td class='lib'></td>";
            break;
        }
        var result = "";
        for(var i=1;i<percent.length;i++)
        {
            result += barText;
        }
        return result;
    }
    function showResults(race,name,party,votes)
    {
        var totalV=totalVotes(votes);
        var result = "";

        result += "<h2>" +race+ "</h2>";
        result += "<table cellspacing='0'>";
        result += "<tr>";
        result += "<th>Candidate</th>";
        result += "<th class='num'> Votes</th>";
        result += "<th class='num'>%</th>";
        result += "</tr>";

        var percent = 0;
        for (var r=0; r < name.length; r++){
            result += "<tr>";
            result += "<td>"+name[i]+ '(' +party[r]+ ")" +"</td>";
            result += "<td class='num'>" +votes[r]+ "</td>";

            percent = calcPercent(votes[r],totalV)
            result += "<td class='num'>(" +percent[r]+ "%)</td>";
            result += createBar(party[r], percent);
            result += "</tr>";
        }
        result += "</table>";

        document.body.innerHTML = result; // or document.write(result) if you prefer
    }
</script>
Comments