選擇隨機圖像

我一直在嘗試獲取隨機圖像以顯示加載。這是我正在使用的代碼：選擇隨機圖像

<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">而不是圖像。

來源

2014-02-08 Jacob Barrow

看一看：http://stackoverflow.com/a/21976204/3315914 – rpax

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>

來源

2014-02-08 15:55:50 Cilan

第二，他將不得不使用innerHTML而不是textContent。 – idmean

@wumm'textContent'工作正常，不是嗎？這就像使用jQuery的'.text（）'而不是'.html（）' - 它也可以工作，但是textContent對HTML和XML文件都適用，而innerHTML只對HTML有效。 – Joeytje50

@wumm textContent返回裏面的文本，所以它應該工作 – Cilan

的問題是，你並沒有使用數組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>

的變量，你保存在您需要的圖像名稱的名稱是整個腳本中保持一致。

來源

2014-02-08 15:57:17 Joeytje50

你應該定義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>

來源

2014-02-08 15:57:42

你不通過數組，並更改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>

來源

2014-02-08 15:59:11 aldanux

分配陣列元素時必須使用ImageArray：

代替

：

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">') 
}

來源

2014-02-08 15:59:42

建議更改：

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>

來源

2014-02-08 16:00:57 ElDoRado1239

選擇隨機圖像

回答

相關問題