使用Javascript更改td元素文本_Javascript_Html_Html Table

使用Javascript更改td元素文本

javascript html

使用Javascript更改td元素文本,javascript,html,html-table,Javascript,Html,Html Table,我正在为html文件编写代码，该文件将显示36000个掷骰子的每个骰子总数。我写了代码，一切看起来都很好，我打印了每个和的数字，我得到了数字，但是当我试图把它们放在td元素中时，我在表中什么也看不到。我在stackoverflow和google上搜索过，都说了同样的话，但都不起作用。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

我正在为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>


标题
掷骰子36000次
骰子总数
总滚动次数
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

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

我不知道这是否有帮助，但我正在Mac OS X上使用Google Chrome

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

您的JS在DOM准备就绪之前运行。将脚本放在

窗口中。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>

试试下面的方法

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

for（var i=0；i试试这个：
$(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];
});

$（函数（）{
var总和=[0,0,0,0,0,0,0,0,0,0,0,0]；
对于（变量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；
开关（总和）{
案例2：
和[0]++；
打破
案例3：
和[1]++；
打破
案例4：
和[2]++；
打破
案例5：
和[3]++；
打破
案例6：
和[4]++；
打破
案例7：
和[5]++；
打破
案例8：
和[6]++；
打破
案例9：
和[7]++；
打破
案例10：
和[8]++；
打破
案例11：
和[9]++；
打破
案例12：
和[10]++；
打破
违约：
打破
}
}
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]；
});
第一件事：您的开关简化为：sums[sum-2]++
。这将有助于可读性。将脚本标记放在您尝试修改的元素之后（就像在结束之前），您正试图修改的DOM元素尚未呈现，或将其包装在一个onload函数中。它在这里工作：我认为它是在td完全加载之前执行的。对不起，mybad，这是一个输入错误。它只是onload
。