1

我正在尝试一些 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 €&lt;/td>
<td>2 663.29 €&lt;/td>
<td><label id="GDPEUIncrement">0.00101</label> €&lt;/td>
<td>16 091 315 618 944.38 €&lt;/td>
<td><label id="GDPEU">2 425 518 867 456.69</label> €&lt;/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 €&lt;/td>
<td>385.79 €&lt;/td>
<td><label id="GDPAsiaIncrement">0.00016</label> €&lt;/td>
<td>19 568 885 419 408.00 €&lt;/td>
<td><label id="GDPAsia">3 120 792 273 016.10</label> €&lt;/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;
}

http://jsfiddle.net/9GTFS/

我有一些数据，现在它是硬编码的初始数据，尽管我尝试使用 JS 在特定时间间隔内更新某些字段（带有“标签”标签和 id 的字段）。当我将 JS 代码放在 HTML 页面中时，它工作得非常好，但是当我把它拿出来放在一个单独的文件中时，它就不起作用了。实际上，我设法弄清楚了这条线

var incrementPopAsia = parseFloat(document.getElementById("populationAsiaIncrement").innerHTML);

发现带有该信息的标签（id 'populationAsiaIncrement'）返回“未定义”状态并且我被困在那里的问题，因为我认为一切都是正确的。什么可能导致此问题？我认为这不是 DOM 问题，因为 JS 是在页面的最后加载的，所以所有代码都已加载（以及 javascript 需要的所有 DOM 元素），事实上，失败的元素（标签id="populationAsiaIncrement") 实际存在。

最终显示的具体问题是document.getElementById("populationAsiaIncrement").innerHTML由于某种原因没有分配给变量。如果我只是在 Firebug 中执行它，它会显示我的预期值，但是当我尝试将它分配给一个变量时，它会得到“未定义”。

4

1 回答 1

4

将<script>用于导入 JavaScript 的标记放在 . 的末尾而<body>不是<head>.

导入的脚本在浏览器获取它们后立即进行评估，同步进行。如果您将脚本放入其中<head>并尝试查找 DOM 元素，则它们将不存在，因为尚未解析文档的正文。通过将脚本放在最后，您可以避免该问题。

编辑- 在您的 jsfiddle 中，代码有效，因为该站点默认将您的 JavaScript 代码包装在一个函数中，该函数设置为页面的“加载”处理程序。直到页面加载后它才会运行。这也是您的另一种选择，但您必须自己构建代码。

于 2013-02-26T22:35:19.077 回答