使用Javascript更改td元素文本

我正在编写html文件的代码，它将显示36000个抛出的骰子的每个骰子总和的数量。我写了代码，一切看起来都很好，我打印了每个总和的数字，并且得到了数字，但是当我尝试将它们放入td元素内时，我在表格中看不到任何东西。我搜索了stackoverflow和谷歌和所有相同的事情，但它不工作。这里是我的代码：使用Javascript更改td元素文本

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Title</title> 
     <script type="text/javascript"> 
      <!-- 

      /* 

       Position #0 : Sum of Dices = 2 
       Position #1 : Sum of Dices = 3 
       Position #2 : Sum of Dices = 4 
       Position #3 : Sum of Dices = 5 
       Position #4 : Sum of Dices = 6 
       Position #5 : Sum of Dices = 7 
       Position #6 : Sum of Dices = 8 
       Position #7 : Sum of Dices = 9 
       Position #8 : Sum of Dices = 10 
       Position #9 : Sum of Dices = 11 
       Position #10: Sum of Dices = 12 

      */ 
      var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 

      for (var i = 0; i < 36000; i++) { 
       var dice1 = Math.floor(Math.random() * 6) + 1; 
       var dice2 = Math.floor(Math.random() * 6) + 1; 
       var sum = dice1 + dice2; 

       switch(sum) { 
        case 2: 
         sums[0]++; 
         break; 
        case 3: 
         sums[1]++; 
         break; 
        case 4: 
         sums[2]++; 
         break; 
        case 5: 
         sums[3]++; 
         break; 
        case 6: 
         sums[4]++; 
         break; 
        case 7: 
         sums[5]++; 
         break; 
        case 8: 
         sums[6]++; 
         break; 
        case 9: 
         sums[7]++; 
         break; 
        case 10: 
         sums[8]++; 
         break; 
        case 11: 
         sums[9]++; 
         break; 
        case 12: 
         sums[10]++; 
         break; 
        default: 
         break; 
       } 
      } 

      document.getElementById("sum2").innerHTML = sums[0]; 
      document.getElementById("sum3").innerHTML = sums[1]; 
      document.getElementById("sum4").innerHTML = sums[2]; 
      document.getElementById("sum5").innerHTML = sums[3]; 
      document.getElementById("sum6").innerHTML = sums[4]; 
      document.getElementById("sum7").innerHTML = sums[5]; 
      document.getElementById("sum8").innerHTML = sums[6]; 
      document.getElementById("sum9").innerHTML = sums[7]; 
      document.getElementById("sum10").innerHTML = sums[8]; 
      document.getElementById("sum11").innerHTML = sums[9]; 
      document.getElementById("sum12").innerHTML = sums[10]; 

      // --> 
     </script> 
    </head> 

    <body> 

     <h1>Roll Dice 36,000 Times</h1> 

     <table border="1"> 
      <th>Sum of Dice</th> 
      <th>Total Times Rolled</th> 

      <tr> 
       <td>2</td> 
       <td id="sum2"></td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td id="sum3"></td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td id="sum4"></td> 
      </tr> 
      <tr> 
       <td>5</td> 
       <td id="sum5"></td> 
      </tr> 
      <tr> 
       <td>6</td> 
       <td id="sum6"></td> 
      </tr> 
      <tr> 
       <td>7</td> 
       <td id="sum7"></td> 
      </tr> 
      <tr> 
       <td>8</td> 
       <td id="sum8"></td> 
      </tr> 
      <tr> 
       <td>9</td> 
       <td id="sum9"></td> 
      </tr> 
      <tr> 
       <td>10</td> 
       <td id="sum10"></td> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td id="sum11"></td> 
      </tr> 
      <tr> 
       <td>12</td> 
       <td id="sum12"></td> 
      </tr> 
     </table> 
    </body> 
</html>

有人说使用innerText和textContent，但似乎没有工作。为什么它不起作用？

我不知道这是否帮助，但我使用谷歌浏览器在Mac OS X

来源

2013-03-18 hakuna matata

第一件事：你的开关简化为： '总和[总和-2] ++'。这将有助于可读性。 – benzonico 2013-03-18 09:30:18

将您的脚本标记置于您正在修改的元素之后（就像在关闭之前），您要修改的DOM元素尚未呈现，或者将其包含在onload函数中 – OJay 2013-03-18 09:33:24

其工作位于：http ：//jsfiddle.net/64j5h/ – 2013-03-18 09:33:24

使用windows.onload功能，以确保HTML被加载：

window.onload=function(){ 

     document.getElementById("sum2").innerHTML = sums[0]; 
     document.getElementById("sum3").innerHTML = sums[1]; 
     document.getElementById("sum4").innerHTML = sums[2]; 
     document.getElementById("sum5").innerHTML = sums[3]; 
     document.getElementById("sum6").innerHTML = sums[4]; 
     document.getElementById("sum7").innerHTML = sums[5]; 
     document.getElementById("sum8").innerHTML = sums[6]; 
     document.getElementById("sum9").innerHTML = sums[7]; 
     document.getElementById("sum10").innerHTML = sums[8]; 
     document.getElementById("sum11").innerHTML = sums[9]; 
     document.getElementById("sum12").innerHTML = sums[10]; 
};

来源

2013-03-18 09:33:56

感谢Bojan它的工作 – 2013-03-18 09:39:20

很高兴我可以帮助:) – 2013-03-18 09:40:24

你的JS之前运行DOM已准备就绪。把你的脚本中window.onload再试，

<script type="text/javascript"> 
    <!-- 
     window.onload = function(){ 

       /* 

        Position #0 : Sum of Dices = 2 
        Position #1 : Sum of Dices = 3 
        Position #2 : Sum of Dices = 4 
        Position #3 : Sum of Dices = 5 
        Position #4 : Sum of Dices = 6 
        Position #5 : Sum of Dices = 7 
        Position #6 : Sum of Dices = 8 
        Position #7 : Sum of Dices = 9 
        Position #8 : Sum of Dices = 10 
        Position #9 : Sum of Dices = 11 
        Position #10: Sum of Dices = 12 

       */ 
       var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 

       for (var i = 0; i < 36000; i++) { 
        var dice1 = Math.floor(Math.random() * 6) + 1; 
        var dice2 = Math.floor(Math.random() * 6) + 1; 
        var sum = dice1 + dice2; 

        switch(sum) { 
         case 2: 
          sums[0]++; 
          break; 
         case 3: 
          sums[1]++; 
          break; 
         case 4: 
          sums[2]++; 
          break; 
         case 5: 
          sums[3]++; 
          break; 
         case 6: 
          sums[4]++; 
          break; 
         case 7: 
          sums[5]++; 
          break; 
         case 8: 
          sums[6]++; 
          break; 
         case 9: 
          sums[7]++; 
          break; 
         case 10: 
          sums[8]++; 
          break; 
         case 11: 
          sums[9]++; 
          break; 
         case 12: 
          sums[10]++; 
          break; 
         default: 
          break; 
        } 
       } 

       document.getElementById("sum2").innerHTML = sums[0]; 
       document.getElementById("sum3").innerHTML = sums[1]; 
       document.getElementById("sum4").innerHTML = sums[2]; 
       document.getElementById("sum5").innerHTML = sums[3]; 
       document.getElementById("sum6").innerHTML = sums[4]; 
       document.getElementById("sum7").innerHTML = sums[5]; 
       document.getElementById("sum8").innerHTML = sums[6]; 
       document.getElementById("sum9").innerHTML = sums[7]; 
       document.getElementById("sum10").innerHTML = sums[8]; 
       document.getElementById("sum11").innerHTML = sums[9]; 
       document.getElementById("sum12").innerHTML = sums[10]; 

     } 
    // --> 
    </script>

来源

2013-03-18 09:34:14

它没有负载工作，但它与onload – 2013-03-18 09:38:40

工作对不起，mybad这是一个错字。它只是'onload'。 – 2013-03-18 09:40:06

尝试像

for(var i = 0; i <sums.length; i++){ 
    document.getElementById("sum" + (i + 2)).innerHTML = sums[i]; 
}

演示：Fiddle

来源

2013-03-18 09:36:04

试试这个：

$(function(){ 
    var sums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 

      for (var i = 0; i < 36000; i++) { 
       var dice1 = Math.floor(Math.random() * 6) + 1; 
       var dice2 = Math.floor(Math.random() * 6) + 1; 
       var sum = dice1 + dice2; 

       switch(sum) { 
        case 2: 
         sums[0]++; 
         break; 
        case 3: 
         sums[1]++; 
         break; 
        case 4: 
         sums[2]++; 
         break; 
        case 5: 
         sums[3]++; 
         break; 
        case 6: 
         sums[4]++; 
         break; 
        case 7: 
         sums[5]++; 
         break; 
        case 8: 
         sums[6]++; 
         break; 
        case 9: 
         sums[7]++; 
         break; 
        case 10: 
         sums[8]++; 
         break; 
        case 11: 
         sums[9]++; 
         break; 
        case 12: 
         sums[10]++; 
         break; 
        default: 
         break; 
       } 
      } 

      document.getElementById("sum2").innerHTML = sums[0]; 
      document.getElementById("sum3").innerHTML = sums[1]; 
      document.getElementById("sum4").innerHTML = sums[2]; 
      document.getElementById("sum5").innerHTML = sums[3]; 
      document.getElementById("sum6").innerHTML = sums[4]; 
      document.getElementById("sum7").innerHTML = sums[5]; 
      document.getElementById("sum8").innerHTML = sums[6]; 
      document.getElementById("sum9").innerHTML = sums[7]; 
      document.getElementById("sum10").innerHTML = sums[8]; 
      document.getElementById("sum11").innerHTML = sums[9]; 
      document.getElementById("sum12").innerHTML = sums[10]; 
});

来源

2013-03-18 09:37:27

使用Javascript更改td元素文本

回答

相关问题