2

last.fm APIからいくつかのJSONデータを追加しようとしていますが、

APIが正しく解析されていることを確認するために、いくつかの段階でalert（）を使用しています。

これにより、getElementById（）。appendChild（）が機能しないという結論に達しました。以下は、設定したテストページへのURLです。

http://mutant-tractor.com/tabtest.html

ここにコード

 
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"
 else if(secAgo >= -60)
   agoString = "blastin' out now";
 else
   agoString = "soon ;)";
 return agoString
}

function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name
}

function lfmRecentTracks(JSONdata) {

try { 
 var eImg, eLink, eSpan, divTag, eWrapper;
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 for (var i = 0; i [lessthanhere] oTracks.length; i++) {
  //insert track link
  spanTag = document.createElement("span");
  spanTag.className = "lfmTrackInfoCell tabslider";
  eLink = document.createElement("a");
  eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
  //alert(truncateName(oTracks[i].name, 25));
  spanTag.appendChild(eLink);
  eLink.href = oTracks[i].url;
  //alert(oTracks[i].url);
  eLink.target = "new";
  eLink.className = "lfmTrackTitle";
  document.body.appendChild(spanTag);

  //insert artist name
  eSpan = document.createElement("span");
  eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) ));
  //alert(truncateName(oTracks[i].artist["#text"], 22));
  eSpan.className = "lfmTrackArtist";
  document.body.appendChild(eSpan);

  //insert date
  eSpan = document.createElement("span");
  spanTag.appendChild(eSpan);
  eSpan.appendChild(document.createTextNode(   (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))  )); 
  //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
  eSpan.className = "lfmTrackDate"; 
  document.body.appendChild(eSpan);
 }  
} catch(e) {}
}

それが機能する唯一の方法は、document.body.appendChild（）を使用することです。

それが違いを生むなら、私は頭の中でスクリプトを呼んでいますか？

それらをアタッチしようとしているdivは4つの異なるdivです。つまり、forループでは、各ループが異なる要素を参照する必要があります。

前もって感謝します！マイルズ

4

3 に答える 3

4

それが違いを生むなら、私は頭の中でスクリプトを呼んでいますか？

getElementById()ドキュメントの本文が解析されていない場合は、解析できません。つまり、コードをwindow.onload関数で実行するか、体の一番下に配置する必要があります。

また、テスト中に削除すると、try/catchエラーのみが非表示になります。

于 2011-01-11T17:16:42.870 に答える
1

取得しようとしている要素がDOMにロードされていることを確認しますか？スクリプトはheadタグ（残りのボディがロードされる前にロードされます）で実行されるとおっしゃいました。検索しているDOM要素が存在する前にスクリプトが実行されている可能性があります。そのため、スクリプトが見つからないため、スクリプトに追加できません。

于 2011-01-11T17:17:32.707 に答える
0

JavaScriptが実行されるまでにHTMLが解析を終了するという保証はありません。パフォーマンス特性が異なる、やりたいことを行う方法はいくつかあります。

コードを関数に入れて、ウィンドウオブジェクトのロードイベントハンドラーとして割り当てることができます。これには、HTMLだけでなく、ページのすべてのリソースの読み込みが完了するまで待機するという欠点があります。これにより、広告サーバーの速度が低下するなどの待機が必要になるため、ページの読み込み時間が遅くなることがよくあります。

コードを関数に入れて、ドキュメントの下部から呼び出すことができます。

jQueryなどのJavaScriptライブラリを使用して、DOMの読み込みが完了したときにJavaScriptを実行できます。クロスブラウザで機能するこれを行う簡単な方法はありません。そのため、車輪の再発明をせずに、すでに成熟したソリューションを使用するのが最も簡単です。

于 2011-01-11T17:21:21.047 に答える