Элементный селектор, возвращающий нуль даже после "DOMContentLoaded"?

Question

У меня возникли некоторые трудности с getElementById, возвращающим нулевой объект. Все приведенные ниже коды были помещены внутри анонимной функции, которая вызывается, когда «DOMContentLoaded» (прослушиватель событий). Я сделал это, чтобы избежать getElementById, не имея возможности найти кнопку Twitter, когда я пытаюсь установить атрибут (в частности, «текст данных»). Первая функция не имеет проблем с поиском элемента (элемента 'a' на странице) с getElementById, но вторая функция возвращает значение null. Я думал, что запустить его только после того, как «DOMContentLoaded» решит эту проблему? Что мне здесь не хватает? (Пожалуйста, дайте мне знать, если я не прикладывая достаточно моего кода здесь, чтобы показать, что я пытаюсь сделать.)

//Add initial invisible quote 
(function() { 
    var quoteList = document.querySelector(".hidden-quotes").children; 
    var randomQuoteNum = Math.round((Math.random() * (quoteList.length - 1))); 
    var quoteBox = document.getElementById("quote-box"); 
    quoteBox.innerHTML = quoteList[randomQuoteNum].innerHTML; 
    var tweetQuote = (quoteBox.children[0].innerHTML + " " + quoteBox.children[1].innerHTML); 
    var tweetButton = document.getElementById("tweet-button"); 
    tweetButton.setAttribute("data-text", tweetQuote); 
    tweetButton.setAttribute("data-url", " "); 
})(); 

//Set up quote button functionality 
var magicButton = document.getElementById("quote-button"); 
magicButton.addEventListener("click", function() { 
    var quoteList = document.querySelector(".hidden-quotes").children; 
    var randomQuoteNum = Math.round((Math.random() * (quoteList.length - 1))); 
    var quoteBox = document.getElementById("quote-box"); 
    quoteBox.innerHTML = quoteList[randomQuoteNum].innerHTML; 
    var tweetQuote = (quoteBox.children[0].innerHTML + " " + quoteBox.children[1].innerHTML); 
    var tweetButton = document.getElementById("tweet-button"); 
    console.log(tweetButton); 
    tweetButton.setAttribute("data-text", tweetQuote); 
    quoteBox.style.opacity = 1; 
}); 

Вот разметка:

<a id="tweet-button" class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet this.</a> 

Только первая функция кажется чтобы иметь возможность доступа и изменения атрибута вышеуказанного элемента, в то время как вторая функция даже не может его найти (getDocumentById возвращает null).

And here's the codepen.

Answer 1

Похоже кнопки вы создали с классом twitter-share-button изменяется немного по сценарию, который загружает его. Попытайтесь получить это так.

var tweetButton = document.getElementsByClassName("twitter-share-button")[0];