Почему innerHTML не работает?

Файл js/game_manager.js:
var n = 3;
var n4 = n*n*n*n;
var cells = [];

function declare_grid()
{
    document.writeln('    <div class="grid-container">');
    for (var i = 0; i < n4; i++)
    {
	document.writeln('        <div class="grid-cell" id = "grid-cell'+i+'"></div>');
    }
    document.writeln('    </div>');
        for (var i = 0; i < n4; i++)
    {
	cells[i] = $('#grid-cell'+i);
        cells[i].css('background', '#258');  // этот код работает
    }
    //    cells[0].innerHTML = '0';   если убрать комментарий не работает
   //     document.getElementById('grid-cell0').innerHTML = '0';   тоже не работает
}

function grid_initialize()
{
    // Те же самые инструкции попробовал. Результат такой же
     //    cells[0].innerHTML = '0';   если убрать комментарий не работает
   //     document.getElementById('grid-cell0').innerHTML = '0';   тоже не работает
}


Файл index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="windows-1251">
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <title>Какая то игра</title>
    <script src="js/jquery-1.11.1.min.js" type="application/javascript"></script>
    <script src="js/game_manager.js" type="application/javascript"></script>
</head>
<body>
    <script type="application/javascript">declare_grid();</script>
    <script type="application/javascript">grid_initialize();</script>
</body>
</html>


Битый час парюсь не могу понять где ошибка
P. S. Попробовал вот так
function grid_initialize()
{
    cells[0].innerHTML = '0';
    alert(cells[0].innerHTML);
}

Выдает 0 как положено. Думал теперь что css неправильный, чтоб проверить поменял 10-ю строчку в файла game_manager.js на
document.writeln('        <div class="grid-cell" id = "grid-cell'+i+'">9</div>');

alert выдает 0, а девятка отображается на странице черным цветом. Значит с css все нормально, а innerHTML не замещает 9-ку. ПОЧЕМУ?
P. S. S. Пробую через JQuery:
$('#grid-cell0').innerHTML = '7';   //  не работает
  • Вопрос задан
  • 4661 просмотр
Решения вопроса 2
а зачем вам JQuery если вы его не используете?
.html(0)

Рабочий код
var n = 3;
var n4 = n*n*n*n;
var cells = [];

function declare_grid()
{
    document.writeln('    <div class="grid-container">');
    for (var i = 0; i < n4; i++)
    {
	document.writeln('        <div class="grid-cell" id = "grid-cell'+i+'"></div>');
    }
    document.writeln('    </div>');
        for (var i = 0; i < n4; i++)
    {
	cells[i] = document.getElementById('grid-cell' +i)
        cells[i].style.backgroundColor = "#258";  // этот код работает
    }
    //    cells[0].innerHTML = '0';   если убрать комментарий не работает
   //     document.getElementById('grid-cell0').innerHTML = '0';   тоже не работает
}

function grid_initialize()
{
    // Те же самые инструкции попробовал. Результат такой же
     //    cells[0].innerHTML = '0';   если убрать комментарий не работает
   //     document.getElementById('grid-cell0').innerHTML = '0';   тоже не работает
}
Ответ написан
SerzN1
@SerzN1
Challenge me!
для начала нужно понимать что jQuery объект это не массив элементов

то есть обращение напрямую к дом элементу без обертки возможно как $('#grid-cell'+i)[0]; выдаст первый элемент

если там много элементов то их нужно фильтровать $('.grid-cell').eq(3)[0];

в вашем случае ссылка на элемент складывается в массив, что не очень правильно потому что лучше использовать коллекцию элементов $('#grid-cells') , которую создать заранее

поэтому в вашем реальном случае нужно писать так cells[0][0]
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы