Question

我正在尝试一些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;
}

http://jsfiddle.net/9GTFS/

我有一些数据，现在初始数据是硬编码的，虽然我尝试使用JS在某些时间间隔更新某些字段（带有“label”标签和id的字段）。当我这样做它将JS代码放在HTML页面中时，它工作得非常好，但当我把它取出并放在一个单独的文件中时它不起作用。实际上，我设法弄明白了这一行

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

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

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

Answer 1

将导入JavaScript的<script>标记放在<body>的端而不是<head>。

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

编辑 - 在你的jsfiddle中，代码可以工作，因为默认情况下该网站将你的JavaScript代码包装在一个设置为页面“加载”处理程序的函数中。它将在页面加载后才会运行。这也是你的另一个选择，但你必须自己构建代码。

Javascript无法在外部文件中工作

1 个答案: