Change Background Image in a loop
<p>To me, this seems like a simple idea- when you click a div, the background image of that div changes. So far, I've tried this with colors (put color names in the array, change "box.style.backgroundImage" to "box.style.backgroundColor")
It works fine with colors, but not with images. Any idea why?</p>

<p>Javascript:</p>

<pre><code>var box = document.getElementById('box'),
imgs = ['/image.jpg', '/image2.jpg'];

box.onclick = function () {
img = imgs.shift();
imgs.push(img);

box.style.backgroundImage = img;
};
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id='box'&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#box {
background: url("https://priteshgupta.com/wp-content/uploads/2011/06/html-ipsum.png");
width:200px;
height:200px;
margin:50px;
}
</code></pre>