javascript - 元素选择器即使在 "DOMContentLoaded"之后也返回 null ？

Question

我在 getElementById 返回空对象时遇到了一些困难。以下所有代码都放在一个匿名函数中，该函数在“DOMContentLoaded”(事件监听器)时调用。我这样做是为了避免 getElementById 在我尝试设置属性(特别是“数据文本”)时找不到 Twitter 按钮。第一个函数使用 getElementById 定位元素(页面上的“a”元素)没有问题，但第二个函数返回 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];