2017-03-14 11 views
0

私はHTMLのテーブルに6つのランダムに生成された数字を配置する必要があり、私は最善の解決策になると思いまして、これは私のJSコードです:ランダムに生成された数値をテーブルに挿入するにはどうすればよいですか?

function GenerateNumber(){ 

var sResultat = ""; 
var iCompteur; 
for(iCompteur=0;iCompteur<=6;iCompteur++) 
    { 
    sResultat = Math.round(Math.random()* 18) + 1; 
    } 
} 

うaddEventListenerを仕事でそれらを呼び出しますか?私はページを読み込むたびにそれを表示させる必要があります。もちろん、ページをリロードすると数字が異なる必要があります。ここで

は私のHTMLコードです:(私は自分のコードをテストするために、私はそれらを表示する場所を示すために、一時的に数字を入れて)

<div class="table"> 
       <table> 

        <tr> 
         <th>FORce</th> 
         <th>DEXtérité</th> 
         <th>CONstitution</th> 
         <th>INTelligence</th> 
         <th>SAGesse</th> 
         <th>CHArisme</th> 
        </tr> 

        <tr> 
         <td class = "FOR"> 
         5 
         </td> 

         <td class = "DEX"> 
         4 
         </td> 

         <td class= "CON"> 
         4 
         </td> 

         <td class ="INT"> 
         4 
         </td> 

         <td class="SAG"> 
         4 
         </td> 

         <td class="CHA"> 
         3 
         </td> 
        </tr> 


       </table> 

      </div> 

答えて

1

function generateNumber() { 
 
    var sResultat 
 
    var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"] 
 
    cells.forEach(function(cell) { 
 
    sResultat = Math.round(Math.random() * 18) + 1; 
 
    document.getElementsByClassName(cell)[0].innerText = sResultat 
 
    }) 
 
} 
 

 
generateNumber()
<div class="table"> 
 
    <table> 
 

 
    <tr> 
 
     <th>FORce</th> 
 
     <th>DEXtérité</th> 
 
     <th>CONstitution</th> 
 
     <th>INTelligence</th> 
 
     <th>SAGesse</th> 
 
     <th>CHArisme</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="FOR"> 
 
     </td> 
 

 
     <td class="DEX"> 
 
     </td> 
 

 
     <td class="CON"> 
 
     </td> 
 

 
     <td class="INT"> 
 
     </td> 
 

 
     <td class="SAG"> 
 
     </td> 
 

 
     <td class="CHA"> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 

 
</div>

0

function GenerateNumber(){ 
 
    var tds = document.querySelectorAll('.table td'); 
 
    
 
    return Array.prototype.forEach.call(tds, function(td){ 
 
     td.innerHTML = Math.round(Math.random()*18) + 1; 
 
    }); 
 
} 
 

 
window.onload = GenerateNumber;
<div class="table"> 
 
       <table> 
 

 
        <tr> 
 
         <th>FORce</th> 
 
         <th>DEXtérité</th> 
 
         <th>CONstitution</th> 
 
         <th>INTelligence</th> 
 
         <th>SAGesse</th> 
 
         <th>CHArisme</th> 
 
        </tr> 
 

 
        <tr> 
 
         <td class = "FOR"> 
 
         5 
 
         </td> 
 

 
         <td class = "DEX"> 
 
         4 
 
         </td> 
 

 
         <td class= "CON"> 
 
         4 
 
         </td> 
 

 
         <td class ="INT"> 
 
         4 
 
         </td> 
 

 
         <td class="SAG"> 
 
         4 
 
         </td> 
 

 
         <td class="CHA"> 
 
         3 
 
         </td> 
 
        </tr> 
 

 

 
       </table> 
 

 
      </div>

+1

1. 'document.querySelectorAll( 't '' Array.prototype.forEach.call(tds、...) 'だけではないのはなぜですか? –

+0

@Jordan良い点。それに応じて私のコードを更新 –

関連する問題