即使在“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];