Element selector returning null even after "DOMContentLoaded"?

Question

I'm having some difficulty here with getElementById returning a null object. All of the below code has been placed inside an anonymous function that is called when "DOMContentLoaded" (event listener). I did this to avoid getElementById not being able to find the twitter button when I attempt to set an attribute (particularly "data-text"). The first function has no problem locating the element (an 'a' element on the page) with getElementById, but the second function returns null. I thought that running it only after "DOMContentLoaded" would solve this problem? What am I missing here? (please let me know if I'm not putting enough of my code here to show what I'm trying to do.)

//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;
});

Here's the markup:

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

Only the first function seems to be able to access and modify an attribute of the above element, while the second function cannot even find it (getDocumentById returns null).

And here's the codepen.

Let us see what the actual button's markup looks like please :) — Hanlet Escaño, Nov 25 '15 at 17:00
Is the tweet button loaded using some other third party script? — AtheistP3ace, Nov 25 '15 at 17:02
I've added in the markup for the tweet button and also a link to the codepen. — Ramon Carroll, Nov 25 '15 at 17:05
@AtheistP3ace, I've added the codepen, so hopefully that should help. In the JS section, you can see that I've added in some code from Twitter in order to load their widget functionality. — Ramon Carroll, Nov 25 '15 at 17:07
Seems like this could be an answer to your problem: http://stackoverflow.com/a/10551031/752527 Essentially, when you include the button twitter's script replaces it with a bunch of stuff, including an iframe, and to access it would be a little difficult. The workaround suggested is to re-create the button each time you want the `data-text` to change, and replace it in the DOM. — Hanlet Escaño, Nov 25 '15 at 17:17
@HanletEscaño This may be what I'm looking for. I'll try it out. So where does one obtain the twttr object? Is it on Twitter's main website? I need that, so I can try using the widgets.load() method. — Ramon Carroll, Nov 25 '15 at 17:24
@RamonCarroll The solution actually does not use the `widgets.load()` method (he said it did not work for him). What he does, and I quote, is to "completely remove the rendered from the DOM, then make a new <a> element with all the appropriate attributes before calling twttr.widgets.load() to finally re-evaluate it and turn it into an <iframe>." He provides a small jsFiddle with an example that you may find useful. — Hanlet Escaño, Nov 25 '15 at 17:28
@HanletEscaño, thanks for sticking with me. The thing is that I did look at the fiddle, and it does show him using the load method at the end, which is what confused me. Perhaps I just need to spend more time on it to get a better understanding as to what he is doing there. I'll let you know what I find. — Ramon Carroll, Nov 25 '15 at 17:31
@RamonCarroll You can remove that line and it would still work fine. As long as you remove and re-append you should be fine. — Hanlet Escaño, Nov 25 '15 at 17:45
@HanletEscaño Got it working! You can check the codepen to see it in action now. Still needed to add twttr.widgets.load(), as the twttr object is already made available because of the script I used. Its needed. Thank you! — Ramon Carroll, Nov 25 '15 at 18:23
Yup, it is working just fine. I am glad that you got it working! — Hanlet Escaño, Nov 25 '15 at 18:27
duplicate:http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents — Ramon Carroll, Nov 25 '15 at 18:33

score 1 · Answer 1 · answered Nov 25 '15 at 17:12

1

It looks like the button you set up with the class twitter-share-button is changed a bit by the script that loads it. Try getting it like this.

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

answered Nov 25 '15 at 17:12

AtheistP3ace

9,611
12
43
43

Okay, I see that it really does do a lot more than I thought, including inserting a massive iframe element. Trying to modify it is much more difficult after that. – Ramon Carroll Nov 25 '15 at 17:20
Yea, it actually doesn't even retain the class of the original anchor. But it seems to continue to have an id of `b`. Either way there seems like a lot going on here. You might want to check this out: https://dev.twitter.com/web/tweet-button – AtheistP3ace Nov 25 '15 at 17:22

Element selector returning null even after "DOMContentLoaded"?

1 Answers1