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') を含むラベルが「未定義」の状態を返すという問題を見つけて、すべてが正しいと思うので、そこで立ち往生しています。この問題の原因は何ですか? JS はページの最後に読み込まれるため、DOM の問題ではないと思います。そのため、コードのすべてのビットが読み込まれ (JavaScript が必要とするすべての DOM 要素)、実際には失敗している要素 (ラベルid="populationAsiaIncrement") は実際に存在します。

最終的に表示される特定の問題はdocument.getElementById("populationAsiaIncrement").innerHTML、何らかの理由で変数に割り当てられないことです。Firebugでそれを実行すると、期待値が表示されますが、変数に代入しようとすると「未定義」になります。

4

1 に答える 1

4

<script>JavaScript をインポートするためのタグをではなく の最後に置きます。<body><head>

インポートされたスクリプトは、ブラウザが取得するとすぐに同期的に評価されます。にスクリプトを入れて<head>DOM 要素を見つけようとしても、ドキュメントの本文がまだ解析されていないため、DOM 要素は存在しません。スクリプトを最後に置くことで、その問題を回避できます。

編集— jsfiddle では、そのサイトはデフォルトで、ページの「ロード」ハンドラーとして設定された関数内に JavaScript コードをラップするため、コードは機能します。ページが読み込まれるまで実行されません。これも別のオプションですが、コードをそのように構成する必要があります。

于 2013-02-26T22:35:19.077 に答える