I Need these images to have links what am I doing wrong?

Question

right guys this is driving me crazy will someone just tell me straight how to make these images links to pages such as test1.html,test2.html,test3.html and rather than tell me what to change just paste the entire fixed code so that i can test it im new to javascript and hate it

function getRandomImage() {  
//declare an array to store the images  
var randomImage = new Array();  
  
//insert the URL of images in array  
randomImage[1] =  "frames/1.png";  
randomImage[2] =  "frames/2.png";   
randomImage[3] =  "frames/3.png";  
randomImage[4] =  "frames/4.png";  
randomImage[5] =  "frames/5.png";
randomImage[6] =  "frames/6.png";  
randomImage[7] =  "frames/7.png";  
randomImage[8] =  "frames/8.png";  
randomImage[9] =  "frames/9.png"; 
randomImage[10] = "frames/10.png";   
  
//loop to display five randomly chosen images at once  
for (let i=0; i< 1; i++) {  
//generate a number and provide to the image to generate randomly  
var number = Math.floor(Math.random()*randomImage.length);  
//print the images generated by a random number  
document.getElementById("result").innerHTML += '<a href="' + randomImage[number].href + '"><img src="'+ randomImage[number].src +'" style="width:450px" /></a>';  
}  
}

       
       
       <button onclick="getRandomImage()">Show Image</button>
       
       
       
       
       <div class="container">
            <span id="result" align="center"></span>  
        </div>

Define "doesn't work"--the only code here just shows an image. If you need a link then you need to also create a link. — Dave Newton, Oct 13 '21 at 14:32
hello dave im new to javascript and have tried the href tag but this doesnt work can you help — JockStrap, Oct 13 '21 at 23:39
Your code attempts to access properties on the items in (the mis-named) `randomImage` array. Those are strings; things like `randomImage[n].src` don't exist. If you want an array of image paths/URLs then you need an array of objects. Unrelated, but using immediate array syntax, e.g., `const randomImages = [ "one.png", "two.png"]` is more canonical. But you may want `const randomImages = [{ src: "one.png", url: "some.url.com" }, ...etc]` — Dave Newton, Oct 14 '21 at 00:29

Joe Lissner · Answer 1 · 2021-10-13T14:54:39.430

2

For the link, you'll want to associate your image and link together, assuming that each link has a specific image to be associated with. So let's update your random images and well also need to surround the img tag with an anchor tag, something like:

randomImage[1] = {
  src: "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
  href: "/index1.html"
}

// update the rest of the links accordingly, then:

'<a href="' + randomImage[number].href + '"><img src="'+ randomImage[number].src +'" style="width:450px" /></a>'

(updated per comment)

edited Oct 13 '21 at 14:54

answered Oct 13 '21 at 14:18

Joe Lissner

2,181
1
15
21

yes thats great but can i link to a different page e.g index1.html,index2.html,index3.html? – JockStrap Oct 13 '21 at 14:49
@JockStrap updated per comment – Joe Lissner Oct 13 '21 at 14:55
hi Joe I have tried this but it can't get the links to work – JockStrap Oct 13 '21 at 16:20
Is the issue that the link isn't clickable or that the link isn't going where you want it to? – Joe Lissner Oct 13 '21 at 16:28
i have reposted in more detail please see my code frames/1.png are images in my folder i want them each to have their own links – JockStrap Oct 13 '21 at 16:52

score 1 · Answer 2 · answered Oct 13 '21 at 14:18

You need to enclose the image in the tag.

    //declare an array to store the images  
    var randomImage = new Array();  
      
    //insert the URL of images in array  
    randomImage[1] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[2] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[3] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[4] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[5] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[6] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[7] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link 
    randomImage[8] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[9] =  "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
    randomImage[10] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";  //i need this image here to be a link
      
    //loop to display five randomly chosen images at once  
    for (let i=0; i< 1; i++) {  
    //generate a number and provide to the image to generate randomly  
    var number = Math.floor(Math.random()*randomImage.length);  
    //print the images generated by a random number  
    document.getElementById("result").innerHTML += '<a href="'+ randomImage[number] +'"><img src="'+ randomImage[number] +'" style="width:450px" /></a>';  
    }  
}

yes i have tried that but i need the generated images to have seprate links such as index1.html, index2.html, index3.html — JockStrap, Oct 13 '21 at 14:45

mplungjan · Answer 3 · 2021-10-13T14:38:36.533

move the array outside the function
shuffle the array
take the first 5
wrap in A

function fy(a, b, c, d) { // https://stackoverflow.com/a/25984542/295783
  c = a.length;
  while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}

// declare an array to store the images AND their href  
const images = [{
    src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
    href: "aaa.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg",
    href: "bbb.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif",
    href: "ccc.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg",
    href: "ddd.html"
  }, {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
    href: "eee.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg",
    href: "fff.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif",
    href: "ggg.html"
  },
  {
    src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg",
    href: "hhh.html"
  },
]

document.getElementById("show").addEventListener("click", function() {
  fy(images);
  document.getElementById("result").innerHTML = images.slice(0, 5).map(img => `<a href="${img.href}"><img src="${img.src}" style="width:450px" /></a>`).join("")
})

<button type="button" id="show">Show Image</button>

<hr/>


<!--image displays here-->

<span id="result" align="center"></span>

score -1 · Answer 4 · answered Oct 13 '21 at 14:20

You can use document.createElement() rather than using innetHTML

function getRandomImage() {
  //declare an array to store the images  
  var randomImage = new Array();

  //insert the URL of images in array  
  randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[2] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[3] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[4] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[5] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[6] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[7] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link 
  randomImage[8] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[9] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
  randomImage[10] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link

  //loop to display five randomly chosen images at once  
  for (let i = 0; i < 1; i++) {
    //generate a number and provide to the image to generate randomly  
    var number = Math.floor(Math.random() * randomImage.length) + 1;
    //print the images generated by a random number  

    const link = document.createElement('a')
    link.target = '__blank__';
    link.href = randomImage[number];

    const img = document.createElement('img');
    img.src = randomImage[number];

    link.appendChild(img);

    document.getElementById("result").appendChild(link);
  }
}

<button onclick="getRandomImage()">Show Image</button>


<!--image displays here-->

<span id="result" align="center"></span>

If you want a random URL for each image, you can use a separate array holding URLs. Or if a specific URL is needed for each of the images, you can hold the images as an array of objects like `[{imageURL: 'some url', linkURL: 'other url'}, {......}]` — Harun Yilmaz, Oct 13 '21 at 14:46
@Joe Lissner answered the way I described here. You can use his answer. Btw, there's nothing wrong with being new to anything :) Good luck with it! — Harun Yilmaz, Oct 13 '21 at 15:17

I Need these images to have links what am I doing wrong?

4 Answers4