从函数中添加图像到网页

Question

我正在创建一个网站，其中一个函数通过图像数组并随机选择一个。

我希望能够选择图像具体显示在网页上的位置，而不仅仅是在底部，这似乎是默认的。

下面是displayRandomHats()函数的代码:

<script> 


function displayRandomHats()   
{  
//array of images with image location, height, and width  

var imageArray = [  
{   
//address URL of the image  
src: "Images/GreenGiantsHat.JPEG",  
//size for the image to be display on webpage  
width: "200",  
height:"200"

},   
{  
src: "Images/LMUHat.JPEG",  
width: "200",  
height: "200"  
},   
{  
src: "Images/NYHat.JPEG",  
width: "200",  
height: "200"  
},  
{  
src: "Images/OrangeGiantsHat.JPEG",  
width: "200",  
height: "200"
},  
{  
src: "Images/WolfHat.JPEG",  
width: "200",  
height: "200"
} ];  

//find the length of the array of images  
var arrayLength = imageArray.length;  
var newArray = [];  
for (var i = 0; i < arrayLength; i++) {  
newArray[i] = new Image(); 
newArray[i].src = imageArray[i].src;  
newArray[i].width = imageArray[i].width;  
newArray[i].height = imageArray[i].height;  
}  

// create random image number  
function getRandomNum(min, max)   
{  
// generate and return a random number for the image to be displayed   
imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
return newArray[imgNo];  
}    

// 0 is first image and (preBuffer.length - 1) is last image of the array  
var newImage = getRandomNum(0, newArray.length - 1);  

// remove the previous images  
var images = document.getElementsByTagName('img');  
var l = images.length;  
for (var p = 0; p < l; p++) {  
;  
}  

// display the new random image
document.body.appendChild(newImage);  
}  

</script>

最后一部分，document.body.appendChild(newImage)"我认为这将是决定图像走向的一部分。我觉得图像应该进入我已经设置的div，但我不确定如何得到它。

谢谢你的建议。

我试图给函数分配一个id，然后我把它放到div中。函数没有运行。我尝试使用文档。试着将图像打印到页面上，但该函数仍然不起作用。

Answer 1

我不确定我是否理解你的意思。这将从给定数组中获得一个随机图像，并附加到具有id的div中。

您可以重复"运行代码段"。按钮，看看它会随机获取图像。

function displayRandomHats()   
{  
//array of images with image location, height, and width  

var imageArray = [  
{   
//address URL of the image  
src: "https://cdn.pixabay.com/photo/2022/04/03/13/01/flower-7108886_960_720.jpg",  
//size for the image to be display on webpage  
width: "200",  
height:"200"

},   
{  
src: "https://cdn.pixabay.com/photo/2022/09/21/02/35/white-faced-heron-7469267_960_720.jpg",  
width: "200",  
height: "200"  
},   
{  
src: "https://cdn.pixabay.com/photo/2022/12/04/15/10/game-7634718_960_720.jpg",  
width: "200",  
height: "200"  
},  
{  
src: "https://cdn.pixabay.com/photo/2022/11/29/17/40/african-elephants-7624960_960_720.jpg",  
width: "200",  
height: "200"
},  
{  
src: "https://cdn.pixabay.com/photo/2022/11/15/04/54/automotive-7593064_960_720.jpg",  
width: "200",  
height: "200"
} ];  

//find the length of the array of images  
var arrayLength = imageArray.length;  
var newArray = [];  
for (var i = 0; i < arrayLength; i++) {  
newArray[i] = new Image(); 
newArray[i].src = imageArray[i].src;  
newArray[i].width = imageArray[i].width;  
newArray[i].height = imageArray[i].height;  
}  

// create random image number  
function getRandomNum(min, max)   
{  
// generate and return a random number for the image to be displayed   
imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
return newArray[imgNo];  
}    

// 0 is first image and (preBuffer.length - 1) is last image of the array  
let newImage = getRandomNum(0, newArray.length - 1);  

document.getElementById("targetDiv").appendChild(newImage);  
}  
displayRandomHats();

<div id="targetDiv"></div>