使用 Javascript 更改 td 元素文本答案

【问题标题】：Changing td element text using Javascript使用 Javascript 更改 td 元素文本
【发布时间】：2013-03-06 14:05:02
【问题描述】：

我正在为 html 文件编写代码，该文件将显示 36000 个掷骰子的每个骰子总和的数量。我编写了代码，一切似乎都很好，我打印了每个总和的数字并得到了数字，但是当我尝试将它们放在 td 元素中时，我在表中什么也看不到。我在 stackoverflow 和 google 上搜索，都说了同样的话，但它不起作用。这是我的代码：

<!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 上使用 Google Chrome

【问题讨论】：

第一件事：您的开关简化为：sums[sum-2]++。这将有助于提高可读性。
将您的脚本标签放在您要修改的元素之后（就像在结束之前

标签： javascript html html-table

【解决方案1】：

使用 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];
};

【讨论】：

【解决方案2】：

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

【讨论】：

对不起，我错了。仅限onload。

【解决方案3】：

试试类似的东西

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

演示：Fiddle

【讨论】：

【解决方案4】：

试试这个：

$(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];
});

【讨论】：