Javascript .innerHTML only affecting parent div

Question

My code is supposed to create a new game, to which you can customize your students and what not. That's not the problem, when you load the game or after finish customizing though, there is an error. For whatever reason on Chrome my images won't load. Nor will it even edit the element that I want to change. This is the update/running code that should work:

function startUp() {
  if (saving) {
    $('#newGame-settings').fadeOut(500);
    setTimeout(function() {
      $("#mainScreen").fadeIn(1500);
    }, 500);
    saving = false;
  } else {
    $('#Start_Menu_Container').fadeOut(500);
    setTimeout(function() {
      $("#mainScreen").fadeIn(1500);
    }, 500);
  }


  var container = "";
  for (var i = 0; i < students.length; i++) {
    container += ("<div class='studentListC' style='background-image: url(\"" + students[i].imgSrc + "\")'>" + students[i].name + "</div>");
  }
  var studentList = document.getElementById("studentList");
  studentList.innerHTML = container;
}

It should just show the main screen, which it does, and then edit the studentList id element. Which it does not . If anybody could help me that would be great!

Also, something useful to probably know is that if I make it so it adds to the mainScreen id (The parent element of studentList) it sort of works, except the picture still does not show. So I may also have an error with the strings in the style.

Link to all code: http://jsbin.com/joneyi/edit?html,css,js,output

Answer 1

In regards to the problem of it not populating the studentList element, it actually is populating a studentList element, just not the one you want (there is still a hidden div on the page called studentList. I believe you just need to make sure you are selecting the studentList element under the mainPage element. (Forgive me for not providing the code to do that, I'm a but rusty on my javascript syntax.)

As far as the images, I think the issue is the nested double quotes:

<div class="studentListC" style="background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQy51udfhp-M17O5xe9wdQNpzq-Rf34cLMcCZ9hqkOIF2PEyKKa")">Brayton</div>

I see your code is actually using single quotes for the whole style attribute, but I think they may be getting converted to double quotes somewhere (possibly an implicit conversion?) Anyway try using single quotes to enclose the url value.