JavaScript for WordPress Forums Vanilla JavaScript What am I doing wrong here?

  • This topic has 3 replies, 2 voices, and was last updated 6 years ago by Will.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #15997
    William
    Participant

    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;
    }
    #16010
    Will
    Participant

    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

    #16017
    William
    Participant

    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!

    #16024
    Will
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.