Javascript功能：返回隨機圖片

JavaScript的新功能。我試圖編寫一個外部的JavaScript函數來隨機顯示圖片。在名爲「images/image1.jpg」的文件夾下有5張圖片。Javascript功能：返回隨機圖片

我有幾個提醒一個叫alert（「測試」）;在HTML和alert（「我」）;在javascript外部函數中這些都不起作用。我不知道爲什麼這不起作用。

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Winch-Lab8</title> 
     <script src="scripts/random.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
     var randNumb; 
     randNumb = randomInteger(5); 
     alert("test"); 
     //This script calls the external function randomInteger() to display random pictures 
     document.write("<img src="images/image" + randNumb + ".jpg" alt="Image" + randNumb"); 
     </script> 
    </body> 
    </html> 

//FUNCTION randomInteger() 
function randomInteger(n) { 
    alert("me"); 
    return Math.ceil(Math.random() * n); 
}

來源

2016-10-31 Edward Winch

什麼是不工作的。解釋你所得到的。 –

看起來這行是錯誤的：

document.write("<img src="images/image" + randNumb + ".jpg" alt="Image" + randNumb");

應該是：

document.write("<img src='images/image" + randNumb + ".jpg' alt='Image" + randNumb + "'/>");

來源

2016-10-31 21:19:41

考慮到他沒有得到他的任何警報，我認爲它甚至不符合該行代碼。 –

該行可能會導致錯誤，這將導致JS的其餘部分無法運行 –

嘿，你可以使用谷歌瀏覽器的控制檯，看看JS錯誤：

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Winch-Lab8</title> 
     <script src="scripts/random.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
     var randNumb; 
     randNumb = randomInteger(5); 
     alert("test"); 
     //This script calls the external function randomInteger() to display random pictures 
     document.write('<img src="images/image'+randNumb+'.jpg" alt="Image'+randNumb+'/>'); 
     </script> 
    </body> 
    </html> 

//FUNCTION randomInteger() 
function randomInteger(n) { 
    alert("me"); 
    return Math.ceil(Math.random() * n); 
}

錯誤是你用字符串連接你的變量的方式，請查看代碼差異並瞭解錯誤。

來源

2016-10-31 21:21:25 itzikb

我已經包含了一個代碼片段，可以做你想做的事情，但我已經刪除了document.write代碼，並用更現代的方法取代了它，即獲取對圖像元素的DOM引用，然後更新src該元素的屬性。

您最大的問題是將隨機數連接到圖像元素HTML中的最後一行。如果您使用這種更現代的方法，這不再需要。

window.addEventListener("DOMContentLoaded", function(){ 
 
    
 
    var img = document.getElementById("pic"); 
 
    
 
    //FUNCTION randomInteger() 
 
    function randomInteger(n) { 
 
    return Math.ceil(Math.random() * n); 
 
    } 
 

 
    var randNumb = randomInteger(5); 
 

 
    //This script calls the external function randomInteger() to display random pictures 
 
    img.src = "image" + randomInteger(5) + ".jpg"; 
 
    
 
    alert(img.src); 
 

 
});

<img id="pic" src="">

來源

2016-10-31 21:22:24

Javascript功能：返回隨機圖片

回答

相關問題