Сетка с координатами JS

Question

Вот что состряпал, но работает не так, как надо. Подскажите где косяк.

var _text1 = "";
var _text2 = "";
var _text3 = "";
var _my;
var _mx;

for (_my = -8; _my < 16; _my++) {

    _text1 = "<div class='tr'>";

    for (_mx = -22; _mx < 10; _mx++) {

        _text2 += "<div class='td'>" + _mx + "_" + _my + "</div>";
    }
    _text3 = "</div>";

    map.innerHTML += _text1 + _text2 + _text3;
}

.table {
    display: table;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    width: 64px;
    height: 64px;
    border:1px solid #ccc;
}

<div class='table' id='map'>
</div>

подскажите, где промахнулся... заранее спасибо

Answer 1

let map = document.querySelector(".map");

for(let y = -8; y<= 8;y++){
   let divY= document.createElement("div");
   divY.classList.toggle("coordinate_y");
   for(let x = -22; x <= 11; x++){
      let divX = document.createElement("div");
      divX.classList.toggle("coordinate_x");
      //divX.innerText = `x: ${x} y: ${y}`
      divY.append(divX);
   }
   map.append(divY);
}

.coordinate_x{
min-width:20px;
height:20px;
background-color:red;
border:1px solid black;
font-size:10px;
}
.coordinate_y{
display:flex;
}

<div class ="map"></div>

Если будете загружать фото карты, рекомендую использовать canvas

БЛОГ НА HUSL

Сетка с координатами JS

Ответы (1 шт):