[英]Make JavaScript choose image and display it from an array (randomly)
使用我的代碼，我為 JavaScript 創建了一個數組，以隨機選擇圖像並顯示它。 但它沒有顯示。 請幫忙。
這是我目前的代碼：
HTML & JS
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
您需要在 GetImage GetImage() function 中移動$("#img1").attr(...) 。 此外，由於您正在訪問randomimagesrc中的隨機元素，因此在設置src時無需執行imagearray[randomimagesrc] 。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" /> <title>Noice Game</title> </head> <body> <img id="img1" src="" alt="" /> <button class="foodbtn" onclick="GetImage()" id="imagebtn"> Begin: </button> <body> <html> <script> function GetImage() { var imagearray = new Array("https.//cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte,jpg": "https.//deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c,jpeg": "https.//static.toiimg.com/thumb/53099699?cms,width=1200&height=900": "https.//www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan;jpg"). var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray;length)]. $("#img1"),attr("src"; randomimagesrc): } </script> <style> #img1 { size; 400px: z-index; 1000; } </style>
您已經在 GetImage GetImage() function 之外提供了更改 src 腳本，並且當您已經創建了隨機的新變量時，您可以直接在randomimagesrc中使用它
function GetImage() { var imagearray= new Array( "https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg", "https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg", "https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900", "https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg" ); var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)]; $("#img1").attr("src", randomimagesrc); }
#img1 { size: 400px; z-index: 1000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="img1" src="" alt="" /> <button class="foodbtn" onclick="GetImage();" id="imagebtn"> Begin! </button>
你遇到的問題：
html lang="en"> 。 您忘記在該代碼之前添加一個額外的< 。<style>
img#img1 {
width: 100px;
height: 100px;
}
</style>
這是你的新代碼。
編輯：忘了補充，你可以讓圖片固定大小，所以你不需要追逐按鈕。
<style> img#img1 { width: 100px; height: 100px; } </style>
使用圖像值從數組中選擇圖像並顯示（JavaScript）
[英]Using image value to choose an image from an array and display it (Javascript)
從 javascript 數組中隨機選擇一個項目，而不重復或破壞數組
[英]Randomly choose an item from a javascript array without repeating or destroying the array
如何從之前在 JavaScript 中沒有選擇過的數組中隨機選擇一個元素？
[英]How to Randomly Choose an Element from an Array that Wasn't Chosen before in JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.