Javascript-форум - Вывод изображения на экран.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вывод изображения на экран. (https://javascript.ru/forum/dom-window/66120-vyvod-izobrazheniya-na-ehkran.html)

Вывод изображения на экран.

Здравствуйте, помогите пожалуйста разобраться.Не могу вывести изображение на экран из цикла.

var pole=[
[0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],] ;
for (var i=0;i<6;i++){
for (var j=0;j<10;j++){
if (pole[i][j]==0) {
pole[i][j]=new Image()
pole[i][j].src="trava.jpg"
pole[i][j].width="50"
pole[i][j].style.position="absolute"
pole[i][j].style.left=j*50+"px";
pole[i][j].style.top =i*70+"px";
pole[i][j].onload=function(){document.body.appendChild(pole[i][j])// не работает.
}}}}
pole[0][0].onload=function(){document.body.appendChild(pole[0][0])}// Работает
pole[5][9].onload=function(){document.body.appendChild(pole[5][9])}//работает

почему-то строка

pole[i][j].onload=function(){document.body.appendChild(pole[i][j])

в цикле не срабатывает. А та же строка вне цикла работает. В моём примере рисуется только верхний левый и нижний правый сегмент игрового поля.

Цитата:

Сообщение от Rise (Сообщение 436293)

DlinniyZmey, pole - массивы чисел, числа это не переменные, а ты с ними обращаешься как с переменными, это не будет работать и вне цикла, получается так 0=new Image() 0.src="trava.jpg" 0.onload= и тд.

Но ведь вне цикла работает...
даже если вне цикла сделать так

var  i=2; var j=2;
pole[i][j].onload=function(){document.body.appendChild(pole[i][j])}

то нарисуется поле 3.3...

Может быть подскажите , как сделать так , чтобы работало..? Просто я тут вообще в тупике. В идеале хочу сделать, чтобы прорисовка всех полей шла плавно через jQery , но пока даже так не могу вывести.

выдаёт 60 [object HTMLImageElement] через запятую.

Разумеется это после цикла. Цикл отрабатывает, превращает нулики-числа в обьекты, но выводить их на экран не хочет. А вот сразу после цикла "в ручную" выводит каждый конкретный элемент.

Цитата:

Сообщение от Rise (Сообщение 436309)

DlinniyZmey, а ну да че та меня переклинило)) в общем .onload должен идти по коду перед .src

так?

<html>
<script>
var pole=[
[0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],] ;
for (var i=0;i<6;i++){
for (var j=0;j<10;j++){
if (pole[i][j]==0) {
pole[i][j]=new Image()
pole[i][j].onload=function(){document.body.appendChild(pole[i][j])}// не работает.
pole[i][j].src="trava.jpg"
pole[i][j].width="50"
pole[i][j].style.position="absolute"
pole[i][j].style.left=j*50+"px";
pole[i][j].style.top =i*70+"px";

}}}
pole[0][0].onload=function(){document.body.appendChild(pole[0][0])}//  Работает
pole[5][9].onload=function(){document.body.appendChild(pole[5][9])}//  работает

Так не работает вообще. Даже пара сегментов внизу кода (0,0 и 5.9) не рисуются.

нет, пара рисуется, просто нужно было фигурную скобку перенести вслед за строкой. Сейчас исправлю.

Цитата:

Сообщение от Rise (Сообщение 436314)

DlinniyZmey,

pole[i][j].onload=function(){document.body.appendChild(this)}

Спасибо!!!! Так и не понял, что это было, но теперь всё работает!!!!

DlinniyZmey,
что-то у вас с onload больно мудрено...

<script>
window.onload = function() {
var pole=[
[0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],] ;
for (var i=0;i<6;i++){
for (var j=0;j<10;j++){
if (pole[i][j]==0) {
pole[i][j]=new Image()
pole[i][j].src="http://javascript.ru/cat/list/mobile.jpg"
pole[i][j].width="50"
pole[i][j].style.position="absolute"
pole[i][j].style.left=j*50+"px";
pole[i][j].style.top =i*70+"px";
document.body.appendChild(pole[i][j])//  работает.
}}}}
</script>
<body></body>