What am I doing wrong here?

[William]

I’m working on a personal project I thought would benefit from using Javascript.
It took some digging around online that I needed to defer the code until the page had loaded, hence the wrapping in the on-load function.

But, I’m having an issue getting this to actually work (it does work with querySelector – but only returns once, before the first instance of gallery icon).
What exactly am I doing wrong?

window.onload = function() {
	var content = document.getElementsByClassName( '.gallery-icon' ),
	    newInnerHTML;

				newInnerHTML = '<div class="share-bar">',
				newInnerHTML += '<div class="social-icons">',
				newInnerHTML += '<a href="http://twitter.com/share?text=&url=" class="social-icon twitter" title="Share on Twitter" target="_blank"><i class="fa fa-twitter-square"></i>Twitter</a>',
				newInnerHTML += '<a href="http://www.facebook.com/sharer.php?u=" class="social-icon facebook" title="Share on Facebook" target="_blank" onclick="window.open(this.href, \'newwin\', \'width=500, height=200\'); return false;"><i class="fa fa-facebook-square"></i>Facebook</a>',
				newInnerHTML += '<a href="#" class="social-icon print" title="Share on Twitter" target="_blank"><i class="fa fa-reddit-alien"></i>Reddit</a>',
				newInnerHTML += '<a href="#" class="social-icon print" title="Share on Twitter" target="_blank"><i class="fa fa-pinterest"></i>Pinterest</a>',
				newInnerHTML += '<a href="#" class="social-icon print" title="Share on Twitter" target="_blank"><i class="fa fa-picture-o"></i>Purchase Prints</a>',
				newInnerHTML += '<a href="#" class="social-icon download" title="Share on Twitter" target="_blank"><i class="fa fa-download"></i>Download</a>',
				newInnerHTML += '</div>',
				newInnerHTML += '</div>';

	content.innerHTML = newInnerHTML;
}

[Will]

What are you trying to accomplish? That will determine how someone responds to your question. A couple things though:

getElementsByClassName only needs a class name, not a selector (i.e. ‘gallery-icon’ not ‘.gallery-icon’, note the dot)

getElementsByClassName returns an array, so either you need to select an item from that array (e.g. content = getElementsByClassName('gallery-icon')[0] and then set that innerHTML, or loop through each item and set the innerHTML for each pass, but it depends on what you’re trying to do

Also, all your innerHTML += lines should end in a semicolon, not a period

[William]

Yep…
I was starting to think I’d need to incorporate a loop.
You pointing out the dot helped. And targeting one of the items in the array really cleared things up.

What I’m trying to do is display a share bar on images. Right now just targeting any images that are wrapped in WordPress’s Gallery wrapper.
Funny thing though, is when I do this, I get an empty Gallery Item with the share bar, instead of having it inject in the targeted one.

Heading back to the Loop lesson now.

Thank you!

[Will]

If the gallery-icon already contains the image, you’re wiping it out by setting innerHTML to something new. You should try creating a document fragment and appending all of your new HTML, and then using appendChild on the gallery-icon item

[Author]

Posts