Creating div and adding a background image to it

Question

I've managed to make a div in the place where I wanted it to be, but when it comes to adding a background image, I just can't do it.

I'm creating divs with the loop and then I'm trying to add a background image to it in the same loop. I don't know if that's the problem or something else, if that's the case, please help me make another.

I tried doing something like itemContainer[i] but I can't get that to work either.

Update: the reason is that my array is empty, don't really know what I'm doing wrong though.

var cicon = [];

$.ajax({
    url: '/json/test.json',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
        $(data.test).each(function(index, value) {
            cicon.push(value.Icon);
            /*console.log(value.Icon) works here, 
            so there's something wrong when I'm adding it to the array.*/
        });
    }
});

for (var i = 0, n = 10; i < n; i++) {
    var itemContainer = document.createElement("div");
    itemContainer.id = "div" + i;
    itemContainer.innerHTML = "item" + i;

    itemContainer.style.width = "86px";
    itemContainer.style.height = "86px";
    itemContainer.style.margin = "5px";
    itemContainer.style.border = "2px solid black";
    itemContainer.style.borderRadius = "10px";
    itemContainer.style.float = "left";

    var iconstring = 'url(\'' + cicon[i] + '\')';
    itemContainer.style.backgroundSize = "100% 100%";
    itemContainer.style.backgroundImage = iconstring;


    document.getElementById('page').appendChild(itemContainer);
}

If anyone is wondering, the array contains urls that look like this: https://steamcdn-a.akamaihd.net/apps/440/icons/earbuds.f6dc85683202f2530ae8728880f4a47d4b013ea8.png

@Jecoms that slash is escaping the ' . I would use `"url('"+ cicon[i] + "')"` myself, but this is valid — Wesley Smith, Aug 20 '16 at 21:51
@DelightedD0D Yes, of course. Mind compiler was in interpolation mode and also trimmed the outer string single quote. — Jecoms, Aug 20 '16 at 21:57

score 2 · Accepted Answer · edited May 23 '17 at 12:00

If you re-declare:

var cicon = [];

you are simply emptying the array variable. (how do i empty an array in javascript)

Example:

var cicon = [];

function doWork() {
  for (var i = 0; i < cicon.length; i++) {
    var itemContainer = document.createElement("div");
    itemContainer.id = "div" + i;
    itemContainer.innerHTML = "item" + i;

    itemContainer.style.width = "86px";
    itemContainer.style.height = "86px";
    itemContainer.style.margin = "5px";
    itemContainer.style.border = "2px solid black";
    itemContainer.style.borderRadius = "10px";
    itemContainer.style.float = "left";

    var iconstring = 'url(\'' + cicon[i] + '\')';
    itemContainer.style.backgroundSize = "100% 100%";
    itemContainer.style.backgroundImage = iconstring;


    document.getElementById('page').appendChild(itemContainer);
  }
}
$(function () {
  $.ajax({
    url: '/json/BotCopper.json',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function (data) {
      $(data.BotCopper).each(function (index, value) {
        cicon.push(value.Icon);
        doWork();
      });
    },
    error: function (jqXHR, textStatus, errorThrown) {
      // this is only for test
      cicon = ['https://rawgit.com/Pixabay/jQuery-flexImages/master/images/1.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/2.jpg',
               'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/3.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/4.jpg',
               'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/5.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/6.jpg',
               'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/7.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/8.jpg',
               'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/9.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/10.jpg'];
      doWork();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="page"></div>

Instead, removing the line:

var cicon = [];

the result is:

window.onload = function() {
            var cicon = ['https://rawgit.com/Pixabay/jQuery-flexImages/master/images/1.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/2.jpg',
                'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/3.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/4.jpg',
                'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/5.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/6.jpg',
                'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/7.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/8.jpg',
                'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/9.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/10.jpg'];


            for (var i = 0, n = 10; i < n; i++) {
                var itemContainer = document.createElement("div");
                itemContainer.id = "div" + i;
                itemContainer.innerHTML = "item" + i;

                itemContainer.style.width = "86px";
                itemContainer.style.height = "86px";
                itemContainer.style.margin = "5px";
                itemContainer.style.border = "2px solid black";
                itemContainer.style.borderRadius = "10px";
                itemContainer.style.float = "left";

                var iconstring = 'url(\'' + cicon[i] + '\')';
                itemContainer.style.backgroundSize = "100% 100%";
                itemContainer.style.backgroundImage = iconstring;


                document.getElementById('page').appendChild(itemContainer);
            }
        }

<div id="page"></div>

I placed that in the wrong place. I'm declaring that before I'm adding stuff to it and not using it in my function. Sorry for that. I'm actually parsing a json file and adding values from there to my array. I'll try this again tomorrow, don't know what i did wrong. — EagL, Aug 20 '16 at 22:40
Well, ehm. That's probably it. But I'll try it out tomorrow and accept your answer if it works. Thanks! — EagL, Aug 20 '16 at 23:37
It worked, kinda. It's repeating a couple of images over and over. It seems like if I have (var i = 0; i < 20; i++) it repeats 20 images (cicon 0-19) 429 times. I did change it by removing the test array. Nvm, it makes sense actually. I think if I do i < 429 I get the right thing. — EagL, Aug 22 '16 at 16:58
I tried it but it can't handle all 429, so it crashes. Idk really, I'll try to figure something out. Thanks for all the help! — EagL, Aug 22 '16 at 17:15
@EagL Your browser is limited like any one! There is no solution for this: too many images.... So, finally, now you could accept and upvote? — gaetanoM, Aug 22 '16 at 17:25
Yeah I understand, I was going to cut down the number of images anyways. I've already accepted and upvoted :) — EagL, Aug 22 '16 at 17:38

score 1 · Answer 2 · answered Aug 20 '16 at 21:46

1

There is nothing wrong with your script but you need elements in cicon. e.g

var cicon = ["url1","url2",...];

Check here for a working example: Div Background image

answered Aug 20 '16 at 21:46

Oluwafemi

14,243
11
43
59

Yeah, I'm adding them in another function, so it's not empty. – EagL Aug 20 '16 at 22:38

Creating div and adding a background image to it

2 Answers2