我需要這些圖片來鏈接我做錯了什么？

Question

正確的家伙，這讓我發瘋了有人會直接告訴我如何將這些圖像鏈接到諸如 test1.html,test2.html,test3.html 之類的頁面，而不是告訴我要更改什么，只需粘貼整個固定代碼即可我可以測試它，我是 javascript 新手並且討厭它

 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>

Answer 1

對於鏈接，您需要將圖像和鏈接關聯在一起，假設每個鏈接都有一個要關聯的特定圖像。 因此，讓我們更新您的隨機圖像和幸福還需要圍繞img標簽與a nchor標簽，是這樣的：

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

（每條評論更新）

Answer 2

您需要將圖像包含在標簽中。

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

Answer 3

您可以使用document.createElement()而不是使用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>

Answer 4

1. 將數組移到函數外
2. 打亂數組
3. 拿前5
4. 包裹在 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>