我正在尝试一些 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:
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;
}
我有一些数据，目前它是硬编码的初始数据，尽管我尝试使用 JS 在特定时间间隔内更新某些字段(带有“标签”标签和 ID 的字段)。当我将 JS 代码放入 HTML 页面时，它工作得很好，但是当我将它取出并放在一个单独的文件中时，它不起作用。实际上，我设法弄清楚了这条线
var incrementPopAsia = parseFloat(document.getElementById("populationAsiaIncrement").innerHTML);
发现带有该信息的标签 (id 'populationAsiaIncrement') 返回“未定义”状态的问题，我被困在那里，因为我认为一切正常。是什么导致了这个问题？ 我认为这不是 DOM 问题，因为 JS 是在页面的最后加载的，所以每一位代码都已加载(以及 javascript 需要的所有 DOM 元素)，事实上，失败的元素(标签id="populationAsiaIncrement") 确实存在。
最终显示的具体问题是 document.getElementById("populationAsiaIncrement").innerHTML 由于某种原因没有分配给变量。如果我只在 Firebug 中执行它，它会显示预期值，但是当我尝试将它分配给一个变量时，它会变成“未定义”。
最佳答案
把 <script>在 <body> 的最结尾 处导入 JavaScript 的标记而不是在 <head> .
导入的脚本在浏览器获取它们后立即同步评估。如果您将脚本放在 <head> 中它试图找到 DOM 元素，它们不会存在，因为文档的主体还没有被解析。通过将脚本放在末尾，可以避免该问题。
编辑 — 在您的 jsfiddle 中，代码可以正常工作，因为该站点默认将您的 JavaScript 代码包装在一个函数中，该函数被设置为页面的“加载”处理程序。直到页面加载后它才会运行。这也是您的另一种选择，但您必须自己按照这种方式构建代码。
关于Javascript 在外部文件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15100708/