異なる位置のnode.getElementsByClassNameの異なる動作

Question

特定の位置に配置された文console.log(document.getElementsByClassName("buttonQ")[0]);は正常に実行されますが、別の特定の位置に配置されたときは同じステートメントが実行されます。

whats going on here ??両方の位置で

ステートメントは、他の文は、文書の読み込みが完了しているされる前にしながら、あなたは、ドキュメントの負荷にMakeRequestを呼び出しているコードにコメントを経由して

//quotes 
    (function(){ 

     window.addEventListener("load", makeRequest); 

     function makeRequest(){ 
     //-----the below statement "console.log" executes succesfully---- 
     console.log(document.getElementsByClassName("buttonQ")[0]); 
     document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest); 
     function reqListener() { 
      if(httpR.readyState === XMLHttpRequest.DONE) { 
      var quote; 
      if(httpR.status === 200) { 
       quote = JSON.parse(httpR.responseText); 
       document.getElementsByClassName("quote")[0].innerHTML = quote[0].body; 
      } else { 
       alert("There was a problem with the request!") 
      } 
      } 
     }  
     var httpR; 
     httpR = new XMLHttpRequest(); 
     httpR.onreadystatechange = reqListener 
     httpR.open("GET", "https://quote-api.glitch.me/pull/1", true); 
     httpR.send(); 
     } 

     //----------------------tweet------------------- 

     //------the below statement "console.log" gives the result "undefined"---- 
     console.log(document.getElementsByClassName("buttonQ")[0]); 


     //document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent); 
     function tweetEvent() { 
     document.getElementsByClassName("quote")[0].normalize(); 
     var tweetToShare = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue; 
     var urlForTweetButton = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href"); 
     urlForTweetButton = urlForTweetButton + "?hashtags=quotes&text=" + encodeURIComponent(tweetToShare); 
     } 

    })(); 

Answer 1

をマークされています。したがって、その時点で、おそらくまだDOM上に要素.buttonQは存在しないでしょう。