getElementById (). appendChild () отказывается работать! - PullRequest
Новая
       16

getElementById (). appendChild () отказывается работать!

2 голосов
/ 11 января 2011

Я пытаюсь добавить некоторые данные JSON из API last.fm,

Я использую alert () на нескольких этапах для проверки правильности синтаксического анализа API, и это

Это привело меня к выводу, что 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 каждый цикл должен ссылаться на отдельный элемент,

Заранее спасибо!Myles

Ответы [ 3 ]

4 голосов
/ 11 января 2011

Я вызываю скрипт в голове, если это что-то меняет?

Вы не сможете getElementById(), если тело документа даже не было проанализировано. Другими словами, вам нужно запустить свой код в функции window.onload или поместить его в самый низ вашего тела.

Кроме того, удалите try/catch во время тестирования, это будет скрывать только ошибки.

1 голос
/ 11 января 2011

Вы уверены, что элемент, который вы пытаетесь получить, загружен в DOM?Вы сказали, что ваш скрипт запускается в теге head (который загружается до загрузки остальной части тела).Возможно, ваш скрипт запускается до того, как будет найден искомый элемент DOM, и поэтому он не сможет его найти и, следовательно, не сможет добавить к нему.

0 голосов
/ 11 января 2011

Нет гарантии, что HTML завершит анализ к моменту выполнения JavaScript.Есть несколько способов сделать то, что вы хотите, с разными характеристиками производительности.

Вы можете поместить свой код в функцию и назначить его в качестве обработчика события загрузки для объекта окна.Недостатком является ожидание завершения загрузки всех ресурсов страницы, а не только HTML.Это часто замедляет время загрузки страницы, так как вам нужно ждать таких вещей, как медленные рекламные серверы и т. Д.

Вы можете поместить свой код в функцию и вызывать его из нижней части документа.

Вы можете использовать библиотеку JavaScript, такую ​​как jQuery, для выполнения JavaScript, когда DOM завершит загрузку.Не существует простого способа сделать это кросс-браузерным, поэтому проще всего не изобретать велосипед и просто использовать то, что уже является зрелым решением.

...