Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   двухмерный массив(поле) (https://javascript.ru/forum/misc/69951-dvukhmernyjj-massiv-pole.html)

shoopik 30.07.2017 17:28
двухмерный массив(поле)
 
Здравствуйте, нашел вот такой код : 
for (var i=0; i<9; i++) {
document.getElementById('game').innerHTML+='<div class="block"</div>';
}

Он вставляет девять блоков в 'game'.
Хочу сделать, чтобы двухмерный массив вставлял также эти блоки, допустим три на три, ну как в крестики-нолики, пишу это:
function pole() {
	for (var i=0; i<3; i++) {
		kvadratiki[i]=[];
		for (var j=0; j<i; j++) {
			kvadratiki[i][j] = document.getElementById('game').innerHTML+='<div class="block"></div>';
		};	
	};
};

он рисует только три блока, а если делаю j<3, тогда всё нормально, вопрос почему нельзя привязать j к i

laimas 30.07.2017 17:43
Цитата:
Сообщение от shoopik
вопрос почему нельзя привязать j к i
А вы как думаете? Вместо kvadratiki[i][j] = .... выводите в консоль значения j и i, наступит прозрение.

shoopik 30.07.2017 17:52
Цитата:
Сообщение от laimas (Сообщение 460098)
А вы как думаете? Вместо kvadratiki[i][j] = .... выводите в консоль значения j и i, наступит прозрение.
если j<i, тогда выводит i=3 j=2, проблема в том, что j=2 ?
если я правильно понял, при написании заместо 'j++' - '++j' должно наращиваться до 3, но все равно 2 там.
если ставлю (var j=0; j<(i+1); j++) - получается j=3, но тогда выводит всего 6 блоков вместо 9 :write:

laimas 30.07.2017 18:16
Цитата:
Сообщение от shoopik
если j<i, тогда выводит i=3 j=2, проблема в том, что j=2 ?
Проблема в том, что i изменяется, что по выводу в консоли не понятно что-ли, что будет всего три итерации и почему?

Что прописать во внутреннем цикле j<3; религия не позволяет и надо извращаться или что?

shoopik 30.07.2017 18:26
Цитата:
Сообщение от laimas (Сообщение 460101)
Проблема в том, что i изменяется, что по выводу в консоли не понятно что-ли, что будет всего три итерации и почему?

Что прописать во внутреннем цикле j<3; религия не позволяет и надо извращаться или что?
ну я выводил console.log(i) и также с (j), либо [i], у меня выводилось просто 3, не понял я по консоли.
Цитата:
Сообщение от laimas (Сообщение 460101)
Что прописать во внутреннем цикле j<3; религия не позволяет и надо извращаться или что?
Да просто не понял почему не работает с i...

laimas 30.07.2017 18:35
Цитата:
Сообщение от shoopik
Да просто не понял почему не работает с i...
 
<div id="as"></div>
<script>
for (var i=0; i<3; i++) {
    for (var j=0; j<i; j++) {
        document.getElementById('as').innerHTML +=  'j = ' + j + ', i = ' + i + ', j < i = ' + (j<i) + '<br>';
    } 
}
</script>

shoopik 30.07.2017 18:41
Цитата:
Сообщение от laimas (Сообщение 460105) 
<div id="as"></div>
<script>
for (var i=0; i<3; i++) {
    for (var j=0; j<i; j++) {
        document.getElementById('as').innerHTML +=  'j = ' + j + ', i = ' + i + ', j < i = ' + (j<i) + '<br>';
    } 
}
</script>
спасибо ))

laimas 30.07.2017 18:45 
<div id="as"></div>
<script>
function pole(side) {
    for (var i=0; i<side; i++) {
        for (var j=0; j<side; j++) {
            document.getElementById('as').innerHTML +=  'j = ' + j + ', i = ' + i + ', j < i = ' + (j<side) + '<br>';
        } 
    }
}

pole(3);
</script>


Иначе от функции никакой пользы.

рони 30.07.2017 18:47
shoopik,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.block {
    height: 50px;
    width: 50px;
    background-color: #FFFF00;
    margin: 2px;
  }
 #game{
   display: flex;
   background-color: #0000FF;
   width: 162px;
 }

  </style>


</head>

<body>
<div id="game"></div>
 <script>
function pole(rows, cols, el) {
  el = document.getElementById(el)
  for (; rows--;) {
    var div = document.createElement("div");
    for (var j=0; j<cols; j++) {
      var d = div.cloneNode();
      d.classList.add("block");
      div.appendChild(d);
    };
    el.appendChild(div)
  };
};
 pole(3, 3, "game")
  </script>
</body>
</html>

shoopik 30.07.2017 19:15
Цитата:
Сообщение от рони (Сообщение 460110) 
function pole(rows, cols, el) {
  el = document.getElementById(el)
  for (; rows--;) {
    var div = document.createElement("div");
    for (var j=0; j<cols; j++) {
      var d = div.cloneNode();
      d.classList.add("block");
      div.appendChild(d);
    };
    el.appendChild(div)
  };
};
 pole(3, 3, "game")
И вам спасибо за интересный код :)


Часовой пояс GMT +3, время: 21:00.