我在 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)。
最佳答案
看起来您使用 twitter-share-button
类设置的按钮被加载它的脚本稍微改变了。尝试像这样得到它。
var tweetButton = document.getElementsByClassName("twitter-share-button")[0];
关于javascript - 元素选择器即使在 "DOMContentLoaded"之后也返回 null ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922266/