Changement de td élément de texte à l'aide de Javascript
Je suis à l'écriture de code pour le fichier html qui affiche le nombre de chaque somme de dés pour les 36000 jeté les dés. J'ai écrit le code et tout semble bien fonctionner, j'ai imprimé les numéros de chaque somme et j'ai obtenu des numéros, mais lorsque je tente de les mettre à l'intérieur de la td élément, je ne vois rien dans le tableau. J'ai cherché sur stackoverflow et sur google et tous dit la même chose, mais ça ne fonctionne pas. Voici mon code:
<!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>
Certains ont dit d'utiliser innerText, et textContent, mais aucune ne semble fonctionner. Pourquoi n'est-il pas de travail?
Je ne sais pas si cela aide, mais je suis en utilisant Google Chrome sur Mac OS X
sums[sum-2]++
. Qui va aider à la lisibilité.Mettez votre balise de script après les éléments qui vous tring à modifier (comme juste avant la fermeture </html>), les éléments du DOM vous tring pour modifier les ont pas rendus encore, ou l'envelopper dans une fonction onload
Son travail ici: jsfiddle.net/64j5h
je pense qu'il est en cours d'exécution avant de td sont complètement chargé.
OriginalL'auteur hakuna matata | 2013-03-18
Vous devez vous connecter pour publier un commentaire.
De l'utilisation de windows.onload de la fonction pour être sûr que le html est chargé:
glad je peux vous aider 🙂
OriginalL'auteur Bojan Kovacevic
Votre JS s'exécute avant que le DOM est prêt. Mettre votre script dans
window.onload
et essayez de nouveau,désolé, mybad c'est une faute de frappe. c'est
onload
seulement.OriginalL'auteur Muthu Kumaran
Essayez ceci:
OriginalL'auteur Mohamed Ali
Essayer quelque chose comme
Démo: Violon
OriginalL'auteur Arun P Johny