Need help making random images clickable to dedicated pages using javascript-CodePudding

Hey guys I have been trying to fix this for days and cannot get it to work, I need the images in my javascript code having their own links to another page on my website e.g index1.html,index2.html,index3.html

so basically the user generates a random image and when the image appears they can click the image and go to the specific page that the image is linked too

does that make sense?

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"; //this needs to have a link 
randomImage[2] =  "frames/2.png"; //this needs to have a link  
randomImage[3] =  "frames/3.png"; //this needs to have a link  
randomImage[4] =  "frames/4.png"; //this needs to have a link  
randomImage[5] =  "frames/5.png"; //this needs to have a link 
randomImage[6] =  "frames/6.png"; //this needs to have a link  
randomImage[7] =  "frames/7.png"; //this needs to have a link  
randomImage[8] =  "frames/8.png"; //this needs to have a link  
randomImage[9] =  "frames/9.png"; //this needs to have a link 
randomImage[10] = "frames/10.png"; //this needs to have 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>';  
}  
}

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


       <div class="container">
            <span id="result" align="center"></span>  
        </div>

CodePudding user response：

¿did you try using objects inside your array?. I will give an example:


function getRandomImage() {  
    //declare an array to store the images  
    var randomImage = new Array();  
      
    //insert the URL of images in array  
    randomImage[0] =  {img: "frames/1.png", url:"index1.html"};
    randomImage[1] =  {img: "frames/2.png", url:"index2.html"};
    randomImage[2] =  {img: "frames/3.png", url:"index3.html"};
    
    var number = Math.floor(Math.random()*randomImage.length);

    let a = document.createElement("a")
    a.href = randomImage[number].url

    let img = document.createElement("img")
    img.src = randomImage[number].img
    img.style.width = "450px"

    a.append(img)

    document.getElementById("result").append(a)
}

And it's cleaner. I really don't understand the for loop when you already created a random number generator..

CodePudding user response：

This can be done simply. Your idea of setting the innerHTML is cool, but your execution of the for loop is a bit off. Here is a working demo using some random images from GIHPY. I'd also recommend using an array of objects in order to easily store the image link and the corresponding URL.

const button = document.getElementById('clickMe')
const images = [
  { img: 'https://media4.giphy.com/media/GvaFelN8tSroAESiS9/giphy.webp', url: 'https://media4.giphy.com/media/GvaFelN8tSroAESiS9/giphy.webp' },
  { img: 'https://media0.giphy.com/media/hIXt83jcZWxUDhC2LD/giphy.webp', url: 'https://media0.giphy.com/media/hIXt83jcZWxUDhC2LD/giphy.webp' },
  { img: 'https://media4.giphy.com/media/6pNyPn7KbMbijMEDf8/giphy.webp', url: 'https://media4.giphy.com/media/6pNyPn7KbMbijMEDf8/giphy.webp' },
  { img: 'https://media1.giphy.com/media/iJaw9MBLbqpgQvhcg4/giphy.webp', url: 'https://media1.giphy.com/media/iJaw9MBLbqpgQvhcg4/giphy.webp' },
];

function getRandomImage() {
    let randomImage;
  for (let i = 0; i < images.length; i  ) {
    randomImage = images[Math.floor(Math.random() * images.length)];
  }
  document.getElementById('result').innerHTML = `<a href="${randomImage.img}" target="_blank"><img src="${randomImage.url}" style="width:450px"/></a>`
}

button.addEventListener('click', getRandomImage);

  <button id="clickMe">Show Image</button>
  <div class="container">
       <span id="result"></span>
   </div>

Also, I'd recommend using template literals instead of concatenating stuff together using plus symbols. It gets a bit messy that way))