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

I have a random image generator but I need the generated image to be clickable to another page see in my code I have tried adding the href tag to the images but this doesn't work.

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);
    //print the images generated by a random number  
    document.getElementById("result").innerHTML  = '<img src="'   randomImage[number]   '" style="width:450px" />';
  }
}

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


<!--image displays here-->

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

CodePudding user response：

You need to surround the img tag with an anchor tag, something like:

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

CodePudding user response：

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>';  
    }  
}

CodePudding user response：

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>

CodePudding user response：

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>