Question

javascript新手。我试图编写外部JavaScript函数来随机显示图片。有5张图片在名为＆＃34; images / image1.jpg＆＃34;。

的文件夹下

我有一个叫做警报的警报（＆＃34; test＆＃34;）;在HTML和警报中（＆＃34; me＆＃34;）;在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);
}

Answer 1

看起来这条线路错了：

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

应该是：

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

Answer 2

嘿，您可以使用谷歌浏览器控制台查看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);
}

错误是你在字符串中连接你的变种的方式，请查看代码的差异并了解错误。

Answer 3

我已经添加了一个代码片段，可以执行您想要的操作，但我删除了document.write代码并将其替换为更现代的方法，即获取DOM引用image元素，然后只更新该元素的src属性。

你的大问题是将随机数连接到图像元素HTML的最后一行。如果您使用这种更现代的方法，则不再需要这样做。

＆＃13;

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);

});

＆＃13;

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

＆＃13;

Javascript功能：返回随机图片

3 个答案: