Javascript generated table not working

Question

任何人都可以发现一个明显的错误吗？为什么这个Javascript生成表（showResults函数）没有显示在我的html？当我有很多文字值引用时，总会发生这种情况......我也很感激我的格式化（空格）上的任何其他评论！

<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 1

Th ERE是与您的代码许多问题：

1. 随机斜线后您的左括号的totalVotes功能

2. 声明没有var变量与for循环（这不会破坏你的代码，但它是不是一个好主意，这样做）

3. 正如其他人指出，不正确地使用switch语句（非数字字符需要加引号）

4. 正如Fabrizio Calderan所述，barText设置不正确。它将工作，但它是非常糟糕的做法。在交换机之前首先声明它。

5. createBar中的for循环根据传递给它的内容不起作用。你在showResults的for循环中传递一个数组作为percent的值，但是通过将它与一个数字进行比较来处理它，就像它是一个数字。您需要在for循环中使用percent.length。

6. 访问函数的方法不正确。 var totalV=function totalVotes(votes);无效并且不起作用。或者使用var totalV=totalVotes(votes);或者如果你不想使用，var totalV=totalVotes.call(null, votes);（虽然你没有必要使用.call财产在你的代码）在showResults功能

7. 另一个错误的for循环中。 var percent=function calPercent(votes[r],totalV)既有我的＃6点的问题，也有错误地访问某个功能的问题，以及由于拼写错误导致该功能实际上不存在。很确定你的意思是var percent=calcPercent(votes[r],totalV)。

8. 我不是document.write方法的粉丝，并且长时间没有使用它。由于它的工作原理/写入位置，我个人可以不惜一切代价避免它。同样如Fabrizio所建议的，innerHTML是一个更好的选择。

总的来说，代码干净，主要是工作，但我觉得你甚至没有尝试运行代码与调试器启用。 Firefox和Chrome都有一个体面的本机调试器，并会发现这些错误。

虽然这样说，我已经解决了这些问题的代码。还有一些其他的变化可以使代码更好/更小/更简单，但我认为这会做现在。

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

Answer 2

我认为你需要给的报价，而与比较字符串，Hence D is not same as "D".

switch (partyType){ 
      case "D": barText="<td class='dem'></td>"; 
      break; 
      case "R": barText="<td class='rep'></td>"; 
      ....... 

而且其他建议，删除功能的关键字，同时调用它。

var totalV = function totalVotes(votes); 

应该

var totalV = totalVotes(votes); 

Answer 3

1）在你的case语句使用引号：case "D"，case "R" ...

2）使用innerHTML方法，而不是文件撰写。使用它只有一个连接字符串，而不是在for循环中。

3）var totalV = function totalVotes(votes);会引发错误：也许你可能需要编写var totalV = totalVotes(votes);

4）barText不被任何定义（与var首先声明它）

---

如果你还insterested对于一般性建议，可以通过对象查找来避免整个开关

function createBar(partyType, percent){ 

    var cells  = "", 
     cellclass = { 
      "D": "dem", "R": "rem", "I": "ind", "G": "green", "L": "lib" 
     }[partyType]; 


    for(var i = 1; i <= percent.length; i++){  
     cells += "<td class='" + cellclass + "'></td>" 
    } 

    <yourtablerow>.innerHTML = cells; // <yourtablerow> is a reference to a table row. 
}