I've managed to get the images to list the way I want, now I'd each image to be a link, that points to it's own URL

What it is now:

<img src="01.jpg" />

What I want it to be:

<a href="01.jpg" target="_new"><img src="01.jpg" /></a>

Current Code:

<script>
  var fullLink = '/'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      document.getElementById("images").appendChild(link);
      document.getElementById("images").appendChild(elem);
  }
</script>

I've managed to get the images to list the way I want, now I'd each image to be a link, that points to it's own URL

What it is now:

<img src="01.jpg" />

What I want it to be:

<a href="01.jpg" target="_new"><img src="01.jpg" /></a>

Current Code:

<script>
  var fullLink = 'http://www.website./'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      document.getElementById("images").appendChild(link);
      document.getElementById("images").appendChild(elem);
  }
</script>

• javascript
• html
• image
• hyperlink
• createelement

Share Improve this question Follow edited Aug 15, 2019 at 5:55 Arnaud 7,4491010 gold badges5252 silver badges7272 bronze badges asked Aug 20, 2014 at 12:16 user2077592user2077592 2

• 1 Who the heck downvoted this question? This question shows reasonable effort, an attempted solution, the expected output and the current output. It's well formatted by site standards. Not every knows everything about javascript or enough to search for when something goes wrong. – KyleMit ♦ Commented Aug 20, 2014 at 12:32
• See this fiddle for a solution and a couple other modifications. You shouldn't do the lookup for document.getElementById("images") on every loop. Instead, do it once before the for and save it as a variable. There's also easier ways to pad the image number to reduce the cyclomatic plexity and increase the readability. – KyleMit ♦ Commented Aug 20, 2014 at 12:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

<script>
  var fullLink = 'http://www.website./'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      link.appendChild(elem);  //<----
      document.getElementById("images").appendChild(link);
  }
</script>

This should be what your're looking for. It puts the img you created as a child of the anchored link you created.

No need to append the image to the images ID because it's contained in link now.