javascript вызовы внутри таблицы не будут работать

У меня есть простой javascript, который увеличивает начальное значение с некоторым количеством в секунду. Кажется, я не могу показать результат скрипта, когда я помещаю ID в строку таблицы.javascript вызовы внутри таблицы не будут работать

Вот сценарий:

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

источник

2013-12-04 programnewb

добавьте источник здесь или сделать скрипку на fiddle.jshell.net и поделиться ссылкой здесь –

Установите содержание с помощью innerHTML в ТДЕ. Смотрите мой работает 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);

источник

2013-12-05 07:36:38 guymid

Попробуйте использовать следующий код:

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

источник

2013-12-05 07:51:42

Прежде всего, ваш скрипт на неправильном месте. Браузер проанализирует весь код 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>

источник

2013-12-05 08:23:52

Спасибо, я полный новичок в javascripting. Как реализовать sessionStorage с указанным выше кодом таким образом, чтобы он сохранял добавочное значение и не сбрасывается при обновлении браузера. Также как я могу форматировать свои номера для запятых. – programnewb

Добро пожаловать. Если мой ответ вам поможет - отметьте это как принято :) Если ваши номера будут иметь дробь - они будут автоматически отображаться с запятой. Вам не нужно делать литье типов. Что касается sessioinStorage, самым простым способом, я думаю, является использование 'cookie'. –

javascript вызовы внутри таблицы не будут работать

ответ

Смежные вопросы