EagL EagL - 3 months ago 10
C# Question

Creating div and adding a background image to it

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. First time trying this, so bare with me.

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

Answer

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>