Изменение текста элемента td с использованием Javascript

Я пишу код для html-файла, который отображает число каждой суммы кубиков для 36000 брошенных кубиков. Я написал код, и все кажется прекрасным, я напечатал номера каждой суммы, и я получил числа, но когда я пытаюсь поместить их внутри элемента td, я ничего не вижу в таблице. Я искал в stackoverflow и на google и все сказанное, но он не работает. Вот мой код:Изменение текста элемента td с использованием Javascript

<!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, но ни один из них не работает. Почему это не работает?

Я не знаю, если это помогает, но я использую Google Chrome на Mac OS X

источник

2013-03-18 hakuna matata

первая вещь: коммутатор упрощается: 'суммы [сумма-2] ++ '. Это поможет читаемости. – benzonico

Поместите свой тег скрипта после того, как элементы, которые вы пытаетесь изменить (например, просто перед закрытием), элементы DOM, которые вы хотите изменить, еще не отображены или не завершены в функцию onload – OJay

Его работа здесь: http : //jsfiddle.net/64j5h/ –

Используйте функцию 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, это сработало –

рад, что я могу помочь :) –

Ваш 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 –

извините, mybad это опечатка. это 'onload' только. –

Try что-то вроде

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

Изменение текста элемента td с использованием Javascript

ответ

Смежные вопросы