Question

我一直试图让一张随机图片显示出来。这是我正在使用的代码：

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

我是javascript的新手，并从我在网上找到的片段拼凑出来。

此代码的问题在于它显示的是<img src="images/random/undefined" width="250px">，而不是图像。

Answer 1

ImageArray没有项目，因此获取它的任何索引都将返回undefined。我认为您尝试设置ImageArray的值，但不小心放image。其次，您不希望textContent，您需要innerHTML。这可能是你想要的代码：

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

Answer 2

您没有传递数组并将textContent更改为innerHTML ... SEE DEMO

<script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>

Answer 3

问题是您没有分配数组ImageArray的值，而是分配数组image。您可以通过将图像阵列重命名为image来改变这种情况，反之亦然。所以：

<script type="text/javascript">
    var image = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


    function getRandomImage() {
        var num = Math.floor( Math.random() * 11);
        var img = image[num];
        document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

    }
</script>

OR：

<script type="text/javascript">
    var ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


    function getRandomImage() {
        var num = Math.floor( Math.random() * 11);
        var img = ImageArray[num];
        document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

    }
</script>

存储图像名称的变量名称需要在整个脚本中保持一致。

Answer 4

你应该定义image一个数组但ImageArray，你也可以减少这样的代码

<head>
    <script type="text/javascript">
    var image = ['goat1.jpg', 'kitchen4.jpg', 'pig1.jpg', 
    'site1.jpg', 'site2.jpg', 'site3.jpg', 'site4.jpg', 'site5.jpg', 
    'site6.jpg', 'site7.jpg', 'site8.jpg']; 

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);

    var img = image[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

Answer 5

分配数组元素时必须使用ImageArray：

ImageArray[0] = 'goat1.jpg';

而不是：

image[0] = 'goat1.jpg';

我还建议在声明中分配数组，而不是使用单独的语句将值赋给数组的不同元素：

var ImageArray = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg','site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg','site8.jpg'];

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}

Answer 6

建议更改：

var imgs = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg',
            'site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg',
            'site8.jpg'];
function getRandomImage(){
 var rnd = Math.floor(Math.random()*imgs.length);
 document.getElementById('randImage').src = imgs[rnd];
}
...
<div><img id="randImage" /></div>

选择随机图像

6 个答案: