Javascript在外部文件中不工作_Javascript

Javascript在外部文件中不工作

javascript

Javascript在外部文件中不工作,javascript,Javascript,我正在尝试一些JS基础知识进行一个小测试，在尝试将Javascript代码放到HTML代码之外时遇到了一个问题 HTML： <body id="index" class="home"> <table style="width:100%"> <thead> <tr> <th>Region</th> <th>Population 2012</th> <th>Popula

我正在尝试一些JS基础知识进行一个小测试，在尝试将Javascript代码放到HTML代码之外时遇到了一个问题

HTML：

<body id="index" class="home">
<table style="width:100%">
<thead>
<tr>
    <th>Region</th>
    <th>Population 2012</th>
    <th>Population 2035</th>
    <th>Annual Growth</th>
    <th>Daily Growth</th>
    <th>Incr./Sec</th>
    <th>Live Pop</th>
    <th>GDP p/c annual</th>
    <th>GDP p/c month</th>
    <th>Incr./Sec</th>
    <th>GDP 2012</th>
    <th>GDP 2013</th>
    <th>Area</th>
    <th>Land</th>
    <th>Water</th>
    <th>Density</th>
</tr>
</thead>
<tr>
<th>EU</th>
<td>503 492 041</td>
<td>520 654 000</td>
<td>746 172</td>
<td>2 044</td>
<td>0.02366</td>
<td><label id="populationEU">503604514.99676</label></td>
<td>31 959.42 €</td>
<td>2 663.29 €</td>
<td><label id="GDPEUIncrement">0.00101</label> €</td>
<td>16 091 315 618 944.38 €</td>
<td><label id="GDPEU">2 425 518 867 456.69</label> €</td>
<td>4 324 782.00 km<sup>2</sup></td>
<td>4 191 578.71 km<sup>2</sup></td>
<td>133 203.29 km<sup>2</sup></td>
<td>116.42 hab/ km<sup>2</sup></td>
</tr>
<h1 id="test"></h1>
<hr />
<tr>
<th>Asia</th>
<td>4 227 067 000</td>
<td>6 534 959 649</td>
<td>84 541 340</td>
<td>231 620</td>
<td><label id="populationAsiaIncrement">2.6808</label></td>
<td><label id="populationAsia">4239810309.5035</label></td>
<td>4 629.42 €</td>
<td>385.79 €</td>
<td><label id="GDPAsiaIncrement">0.00016</label> €</td>
<td>19 568 885 419 408.00 €</td>
<td><label id="GDPAsia">3 120 792 273 016.10</label> €</td>
<td>44 579 000.00 km<sup>2</sup></td>
<td>43 286 209.00 km<sup>2</sup></td>
<td>1 292 791.00 km<sup>2</sup></td>
<td>94.82 hab/ km<sup>2</sup></td>
</tr>
</table>
<script type="text/javascript" src="js/counters.js"></script>
</body>

我有一些数据，现在是硬编码的初始数据，尽管我尝试使用JS在一定的时间间隔内更新某些字段（带有“label”标记和id的字段）。当我将JS代码放入HTML页面时，它工作得非常好，但是当我将其取出并放入单独的文件时，它就不工作了。事实上，我设法弄明白了

var incrementpopsia=parseFloat（document.getElementById（“populationAsiaIncrement”）.innerHTML）
查找带有该信息的标签（id“PopulationAsainCrement”）返回“undefined”状态的问题，我被困在那里，因为我认为一切正常。是什么导致了这个问题？
我认为这不是DOM的问题，因为JS是在页面的最后加载的，所以每一段代码都已加载（以及javascript所需的所有DOM元素），事实上，失败的元素（label id=“populationAsiaIncrement”）实际上是存在的
最终显示的具体问题是，document.getElementById（“PopulationAsainCrement”）.innerHTML由于某种原因没有被分配给变量。如果我只是在Firebug中执行，它会显示预期值，但当我尝试将其分配给变量时，它会得到“未定义”。将导入JavaScript时使用的
标记放在
的端，而不是
中
一旦浏览器同步获取导入的脚本，就会对其进行评估。如果将脚本放入
中，并且它尝试查找DOM元素，则这些元素将不存在，因为文档的主体尚未解析。通过将脚本放在末尾，可以避免该问题
编辑-在JSFIDLE中，代码是有效的，因为默认情况下，该站点将JavaScript代码包装在一个函数中，该函数被设置为页面的“加载”处理程序。在加载页面之前，它不会运行。这也是您的另一个选择，但您必须自己构建代码。
将导入JavaScript时使用的
标记放在
的端，而不是
中
一旦浏览器同步获取导入的脚本，就会对其进行评估。如果将脚本放入
中，并且它尝试查找DOM元素，则这些元素将不存在，因为文档的主体尚未解析。通过将脚本放在末尾，可以避免该问题
编辑-在JSFIDLE中，代码是有效的，因为默认情况下，该站点将JavaScript代码包装在一个函数中，该函数被设置为页面的“加载”处理程序。在加载页面之前，它不会运行。这也是您的另一个选择，但您必须自己构建代码。
除了提供Fiddle链接外，还可以在此处粘贴代码。Fiddle死了，question死了。你不需要在HTML中为JSFIDLE添加
标记。我认为这不是DOM问题，因为JS是在页面的最后加载的，所以每一段代码（以及javascript需要的所有DOM元素）都已加载，事实上，还有失败的元素（label id=“populationAsiaIncrement”）确实存在。你应该关闭你的
标签一次。。。您不能依赖自动关闭脚本标记。在我的测试中，如果不关闭脚本，它甚至不会执行。。我不知道这是否是全部问题，因为在脚本运行的中途出现错误是没有意义的。var totalpopsia=parseInt（populationAsia.innerHtml，10）+（…）会使您的小提琴同时在Chrome和FireFox下工作。如果不这样做，则（对totalPopAsia字符串的后续操作）的结果为NaN。除了提供Fiddle链接外，请将代码粘贴到此处。Fiddle死了，question死了。你不需要在HTML中为JSFIDLE添加
标记。我认为这不是DOM问题，因为JS是在页面的最后加载的，所以每一段代码（以及javascript需要的所有DOM元素）都已加载，事实上，还有失败的元素（label id=“populationAsiaIncrement”）确实存在。你应该关闭你的
标签一次。。。您不能依赖自动关闭脚本标记。在我的测试中，如果不关闭脚本，它甚至不会执行。。我不知道这是否是全部问题，因为在脚本运行的中途出现错误是没有意义的。var totalpopsia=parseInt（populationAsia.innerHtml，10）+（…）会使您的小提琴同时在Chrome和FireFox下工作。如果您不这样做，那么（您对totalPopAsia字符串的后续操作）的结果是NaN。对于嵌入式脚本不是同样的情况吗？@Barmar well您确实有一个要点：-），但是，它是有效的，因为JSFIDLE将代码放在“加载”处理程序中。但他说，它也在他的常规站点中工作。因此，如果他在嵌入脚本的同一位置加载外部JS，它应该可以工作。@Barmar我不清楚是否存在“常规站点”，但你可能是对的。然而，无论如何，
中的JavaScript都不会在
中看到DOM元素。这就是为什么我认为“常规站点”就是JSFIDLE。我知道我在猜测：-）他发布了代码，
标记位于的末尾。对于嵌入式脚本来说，这不是同样的事情吗？@Barmar你确实有一点：-）但是，这很有效，因为jsfiddle将代码放在一个“加载”处理程序中。但他说，这也在他的常规站点中起作用。因此，如果他在嵌入脚本的同一位置加载外部JS，它应该可以工作。@Barmar我不清楚是否有actu
var test = document.getElementById("test"); // Test placeholder

var millennium =new Date(2013, 0, 1); //Month is 0-11 in JavaScript
var today=new Date();
var one_day=60*60*24; //Get 1 day in seconds

//Calculate difference btw the two dates, and convert to days
var secondsSinceNewYear = Math.ceil(today.getTime()-millennium.getTime());

var populationEU = document.getElementById("populationEU");
var totalPopEU = 0;
var incrementEU = 1/2 ;

setInterval(popGrowthEU, 500);

function popGrowthEU()
{
totalPopEU = totalPopEU+incrementEU;
populationEU.innerHTML = addCommas(Math.round(totalPopEU*100)/100);
}

var GDPEU = document.getElementById("GDPEU");
var totalGDPEU = 0;
var incrementGDPEU = 1*totalPopEU/10;

setInterval(GDPGrowthEU, 100);

    function GDPGrowthEU()
    {
        totalGDPEU = totalGDPEU+incrementGDPEU;
        GDPEU.innerHTML = addCommas(Math.round(totalGDPEU*100)/100);
    }

var populationAsia = document.getElementById("populationAsia");
var incrementPopAsia = parseFloat(document.getElementById("populationAsiaIncrement").innerHTML);
var totalPopAsia = populationAsia.innerHTML+(incrementPopAsia*secondsSinceNewYear);
var incrementPopAsia = incrementPopAsia/2;
setInterval(popGrowthAsia, 500);

function popGrowthAsia()
    {
        totalPopAsia = totalPopAsia+incrementPopAsia;
        populationAsia.innerHTML = addCommas(Math.round(totalPopAsia*100)/100);
    }

var GDPAsia = document.getElementById("GDPAsia");
var incrementGDPAsia = document.getElementById("GDPAsiaIncrement").innerHTML;
var totalGDPAsia = incrementGDPAsia*secondsSinceNewYear*totalPopAsia;
var incrementGDPAsia = incrementGDPAsia*totalPopAsia/10;

setInterval(GDPGrowthAsia, 100);

function GDPGrowthAsia()
{
totalGDPAsia = totalGDPAsia+incrementGDPAsia;
GDPAsia.innerHTML = addCommas(Math.round(totalGDPAsia*100)/100);
}

function addCommas(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ' ' + '$2');
}
return x1 + x2;
}