Question

我有一个简单的javascript，它以每秒一些数字递增初始值。每当我将ID放在表格行中时，我似乎无法显示脚本的结果。

这是脚本：

<table class="dashboard_module" style="border-top:0;border-left:0; border-right:0;border-bottom: 1px solid #ddd">

    <script type="text/javascript">
    <!--
        var popcounter = document.getElementById('pop');
        var ethanolcounter = document.getElementById('ethanol');
        var meatlcounter = document.getElementById('meat');


        var Val1 = 1412015;
        var Val2 = 20000;
        var Val3 = 20000;


        setInterval( function() {
          Val1 += 1;
          Val2 +=1000;
          Val3 +=1000;

          popcounter.value = Math.round(Val1);
          ethanolcounter.value = Math.round( Val2 );
          meatlcounter.value = Math.round( Val3 );

        },1000);

    // -->   
    </script>
    <tr><td id="pop" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Pop</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>

    <tr><td id="ethanol" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Etha</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>

    <tr><td id="meat" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated M</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>
</table>

Answer 1

使用innerHTML设置td的内容。请参阅我的工作jsBin演示here

    setInterval( function() {
      Val1 += 1;
      Val2 +=1000;
      Val3 +=1000;

      popcounter.innerHTML = Math.round(Val1);
      ethanolcounter.innerHTML = Math.round( Val2 );
      meatlcounter.innerHTML = Math.round( Val3 );

    },1000);

Answer 2

尝试使用以下代码：

<html>
    <head></head>
    <body>
        <table class="dashboard_module" style="border-top:0;border-left:0; border- right:0;border-bottom: 1px solid #ddd">

        <script type="text/javascript">
            var Val1 = 1412015;
            var Val2 = 20000;
            var Val3 = 20000;


            setInterval( function() {
                var popcounter = document.getElementById('pop');
                var ethanolcounter = document.getElementById('ethanol');
                var meatlcounter = document.getElementById('meat');
                Val1 += 1;
                Val2 +=1000;
                Val3 +=1000;

                popcounter.innerHTML = Math.round(Val1);
                ethanolcounter.innerHTML = Math.round( Val2 );
                meatlcounter.innerHTML = Math.round( Val3 );

            },1000);
        </script>
        <tr>
        <td id="pop" class="label" style="font-weight: bold; color: green; padding:         0 10px 0 0; vertical-align: top; width:15%">
        </td>
        <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Pop</td>
        <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
        </td></tr>

        <tr><td id="ethanol" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top;width:15%"></td>
        <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Etha</td>
        <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
        </td></tr>

        <tr><td id="meat" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
        <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated M</td>
        <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
        </td></tr>
    </table>

   </body>
</html>

Answer 3

首先，您的脚本位置不正确。浏览器从上到下解析整个HTML代码。如果他找到了<script>标签，他会毫不犹豫地运行它们。因此，当浏览器到达脚本的第一行时，他试图找到带有id="pop"的元素，但是他找不到该元素，因为这个元素位于脚本的底部并且尚未被解析浏览器。

您应该始终在脚本将使用该脚本将使用的元素之后。或者您可以将脚本添加到window事件，例如onload：脚本将在加载整个文档时执行。

其次，如果想要在表格中看到您的计算值，请使用innerHTML代替value。

<table class="dashboard_module" style="border-top:0;border-left:0; border-right:0;border-bottom: 1px solid #ddd">
    <tr><td id="pop" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Pop</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>

    <tr><td id="ethanol" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated Etha</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>

    <tr><td id="meat" class="label" style="font-weight: bold; color: green; padding: 0 10px 0 0; vertical-align: top; width:15%"></td>
    <td class="label" style="font-weight: bold; padding: 0 10px 0 0; width:35%; ; vertical-align: top">Estimated M</td>
    <td style="vertical-align: top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus est congue luctus sodales.
    </td></tr>

    <script type="text/javascript">
        var popcounter = document.getElementById('pop');
        var ethanolcounter = document.getElementById('ethanol');
        var meatlcounter = document.getElementById('meat');

        var Val1 = 1412015;
        var Val2 = 20000;
        var Val3 = 20000;

        setInterval( function() {
          Val1 += 1;
          Val2 +=1000;
          Val3 +=1000;

          popcounter.value = Math.round(Val1);
          ethanolcounter.value = Math.round( Val2 );
          meatlcounter.value = Math.round( Val3 );
        },1000);
    </script>
</table>

表格中的javascript调用无效

3 个答案: