I'm looking for some help writing a javascript snippet that will DYNAMICALLY update a div style= "background-image:url..." to match the a href above it. This is on a portfolio website, so this is a gallery where all the images are live at once. I need the snippet to run through each individual a href and nested div underneath it and have them match, unique to each image (Don't want a page of the same picture 20 times) I'm just starting to learn JS, so I've been struggling with this one. Here's the html.

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">

This href should from above should be copied to the div style url below.

<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

This is what it looks like as a whole...

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
    <div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

Any help would be greatly appreciated!

This is what I'm thinking, so far...

function abc() {
    var a = document.getElementById("tobematched").
    var b = document.getElementById("matcher").style.backgroundImage;

                        }

Not sure where to go from here, since I don't know how to grab the href... I think I'm on the right track.

I'm looking for some help writing a javascript snippet that will DYNAMICALLY update a div style= "background-image:url..." to match the a href above it. This is on a portfolio website, so this is a gallery where all the images are live at once. I need the snippet to run through each individual a href and nested div underneath it and have them match, unique to each image (Don't want a page of the same picture 20 times) I'm just starting to learn JS, so I've been struggling with this one. Here's the html.

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">

This href should from above should be copied to the div style url below.

<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

This is what it looks like as a whole...

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
    <div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

Any help would be greatly appreciated!

This is what I'm thinking, so far...

function abc() {
    var a = document.getElementById("tobematched").
    var b = document.getElementById("matcher").style.backgroundImage;

                        }

Not sure where to go from here, since I don't know how to grab the href... I think I'm on the right track.

• javascript
• html
• url
• dynamic
• href

• Are you looking for pure JS or does jquery work? – ljlozano Commented Jan 29, 2016 at 2:06
• pure JS would be best... I think. I have a few different things I've tried so far, mostly with getElementById... I figured I could grab the href that way, but that doesn't seem to work. WebStorm doesn't like href. It is cool with ".style.backgroundImage" however. So I can grab the div's "style", but not the a href... if that makes sense – tman091 Commented Jan 29, 2016 at 2:08
• 1 see the changes to the original post. let's see how i'm doing... haha – tman091 Commented Jan 29, 2016 at 2:13

1 Answer 1

You can use a bination of querySelector() and the .href property to get what you need:

var targetDiv = document.querySelector('#matcher');
var url = targetDiv.parentNode.href;
targetDiv.style.backgroundImage = 'url(' + url + ')';

Alternatively you can use:

var url = document.querySelector('#tobematched').href

This second option does not depend on the structure of the document, but causes JS to look through the whole document again.

If you were using jQuery:

var url = $('#tobematched')attr('href');
$('#matcher').css('background-image', 'url(' + url + ')');

Live Example

Edit: As per the further description by OP in the ments, here is the code you actually need:

var targetDivs = document.querySelectorAll('.img-container');

for (var i = 0; i < targetDivs.length; i++) {
  var url = targetDivs[i].parentNode.href;
  targetDivs[i].style.backgroundImage = 'url(' + url + ')';
}