Javascript .innerHTML влияет только на родительский div

Question

Мой код должен создать новую игру, в которую вы можете настроить своих учеников, а что нет. Это не проблема, когда вы загружаете игру или после завершения настройки, есть ошибка. По какой-либо причине Chrome не загружает мои изображения. И он даже не отредактирует элемент, который я хочу изменить. Это обновление/погонный код, который должен работать:

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

Он просто должен показать главный экран, который он делает, а затем отредактировать элемент ID studentList. Который он не. Если бы кто-нибудь мог мне помочь, это было бы здорово!

Кроме того, что-то полезное, вероятно, знает, что если я сделаю так, чтобы он добавил идентификатор mainScreen (родительский элемент studentList), он вроде бы работает, за исключением того, что изображение все еще не отображается. Поэтому у меня также может быть ошибка со строками в стиле.

Ссылка на весь код:http://jsbin.com/joneyi/edit?html,css,js,output

Answer 1

В отношении к проблеме не заселять элемент studentList, он на самом деле заселение в studentList элемент, только не тот, который вы хотите (есть еще скрытый div на странице, называемой studentList. Я считаю, что вам просто нужно убедиться, что вы выбираете элемент studentList под элементом mainPage. (Простите, что я не предоставляю код для этого, я просто ржавый в синтаксисе javascript.)

Что касается изображений, я думаю, что проблема заключается в вложенных двойные кавычки:

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

Я вижу, что ваш код на самом деле использует одиночные кавычки для всего атрибута стиля, но я думаю, что они могут получать преобразован в двойные кавычки, где-то (возможно, неявное преобразование?) В любом случае попробуйте использовать одиночные кавычки, чтобы приложите значение URL.