css、javascript：带有数组的随机图像加载器删除了我的变量的第一部分如何解决这个问题？

Question

我正在尝试将 css 和 javascript 的随机图像背景设置为 div，但是当我在 google 上加载随机图像时 chrome 它不起作用

我尝试在变量中处理所有图片 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 = [ 图片1 , 图片 2 , 图片 3 , 图片 4 ];

编辑：

函数：

function getImageTag() {

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

Answer 2

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

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

其次，您还需要删除手动注入的 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 Whosebug output

希望对您有所帮助！ :)

css、javascript：带有数组的随机图像加载器删除了我的变量的第一部分如何解决这个问题？

css, javascript: random image loader with array removes the first part of my variable how to fix this?

javascript

html

css

image

random