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功能：返回随机图片

回答

相关问题