css、javascript：配列を含むランダムイメージローダーは、これを修正する方法を私の変数の最初の部分を削除しますか？

Question

私は、変数内のすべての画像のURLを実行しようとしましたが、これがない私はdiv要素のCSSやJavaScriptでランダム画像の背景を設定しようとしているが、私はGoogleのChromeでランダムに画像をロードするとき、それは

を動作しません。うまくいかない。それは私のコードを変更して、なぜそれがランダムなイメージ画像が印刷さ

<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と比較すると出力があります、

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

Answer 1

あなたのコードを持つ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 StackOverflow output

は、この情報がお役に立てば幸い！ :)

Answer 2

が、それはそう変数ではありません"を削除htmlとして編集します！

するvar imageURLs = [ 画像1、画像2 、画像3 、のimage4 ]。

編集：

機能：

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