javascript - CSS，JavaScript : random image loader with array removes the first part of my variable how to fix this?

Question

我正在尝试使用 css 和 javascript 将随机图像背景设置为 div，但是当我在谷歌浏览器上加载随机图像时它不起作用

我试图在变量中处理所有图像 url，但这不起作用。

有谁知道为什么它会更改我的代码以及为什么它不起作用

加载随机图像的代码

<script type="text/javascript">
    var image1 = "images/image1.png";
    var image2 = "images/image2.png";
    var image3 = "images/image3.png";
    var image4 = "images/image4.png";

  var imageURLs = [
       "image1"
     , "image2"
     , "image3"
     , "image4"
  ];
  function getImageTag() {
    var img = '<div class="pdiv2" style="background-image: url("';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '")"></div>';
    return img;
  }

</script>

打印图片的地方

<script type="text/javascript">
        document.write(getImageTag());
    </script>

当我使用 google chrome 检查时的输出，编辑为 html

<div class="pdiv2" style="background-image: url(" image3")"=""></div>

Answer 1

您的代码有两个问题。首先，您需要在使用变量时删除 ":

var imageURLs = [
  image1,
  image2,
  image3,
  image4
];

其次，您还需要删除手动注入(inject)的 url() 周围的双引号。您的最终函数应如下所示:

var image1 = "images/image1.png";
var image2 = "images/image2.png";
var image3 = "images/image3.png";
var image4 = "images/image4.png";

var imageURLs = [
  image1,
  image2,
  image3,
  image4
];

function getImageTag() {
  var img = '<div class="pdiv2" style="background-image: url(';
  var randomIndex = Math.floor(Math.random() * imageURLs.length);
  img += imageURLs[randomIndex];
  img += ')"></div>';
  return img;
}

console.log(getImageTag()); // For StackOverflow output

希望对您有所帮助! :)