将生成的随机数存储在变量中，然后调用该变量作为文件名来显示图像。Javascript
所以我有几张照片，我想在一个页面上随机生成。这些图片名为0-9 .png，我使用一个预先制作的函数来生成随机数.我的问题是，当我试图调用这个函数在稍后的页面，它没有放置图像。什么都没有出现。
我知道这很简单，但我在这里的桌子上拼命工作。我想知道的是是什么扰乱了我的职能？
function showimg()
{
/*
The showimg() function displays a random image from the 0.png through 9.png
files.
*/
var imgNumber = randomInteger(9);
return imgNumber;
/* Return a random number from 0 to 9 */
document.write("<img src='imgNumber.png' alt='' />");
} 回答 4
Stack Overflow用户
发布于 2013-11-20 22:54:49
关于你如何处理这个问题，有几个问题。
首先，在现代Javascript开发中，使用document.write是不好的做法。您应该使用像appendChild这样的东西。
其次，在字符串中引用imgNumber。这里只使用"imgNumber“，而不是imgNumber变量的内容。为此，字符串连接是插入它的一种方式：
"<img src='" + imgNumber + ".png'>"下面是我处理你的问题的方法。首先，在页面上放置一个空元素，在其中添加图像：
<div id="random-images-here"></div>然后，在该元素之后的某个地方，您可以得到以下Javascript，类似于您的Javascript：
<script>
// create a random integer from 0 to maxInt
var randomInteger = function(maxInt) {
return Math.floor(Math.random() * (maxInt + 1));
};
// append a random image to el
var showImg = function(el) {
var imgNumber = randomInteger(9),
img = document.createElement('img');
img.src = imgNumber + ".png";
img.alt = "Image #" + imgNumber;
el.appendChild(img);
};
// grab the element to append images to
var imgHolder = document.getElementById('random-images-here');
// place 4 images in the image holder
for (var i = 0; i < 4; i++) {
showImg(imgHolder);
}
</script>这是一个演示
(注意:我稍微修改了演示中的代码，以使用我找到的带有数字图像的站点。)
Stack Overflow用户
发布于 2013-11-20 22:34:42
你得说document.write("<img src='" + imgNumber + ".png' alt='' />");。即使imgNumber是整数，JavaScript也会自动将其转换为字符串。
另外，您需要将document.write调用放在return语句之前。
然而，就像其他人所说的那样，document.write可能不是向页面添加内容的最佳方法。我建议您获取JQuery或其他东西，并将其用于DOM操作。
Stack Overflow用户
发布于 2013-11-20 22:39:59
您正在编写javascript，因此您需要编辑图像的来源，如果您在php中尝试它，它将工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<script>
var imgNumber = Math.floor((Math.random()*9)+1);
document.getElementById("example").src= imgNumber + '.png';
</script>
</head>
<body>
<img id='example' src="" alt="">
</body>
</html>https://stackoverflow.com/questions/20108328
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号